Laravel Mix+Vue2をTypeScriptに対応させようとしてハマった件

Vue.JS

LaravelMix+Vue2をTypeScriptに対応させるべく色々やっていたのだが色々はまりましたので、その時の忘備録です。こんなののために1日潰れました。
いまさらVue2にするとかはないと思いますがあまり情報がなかったので残しておきます。

結論だけ先に

webpack-cliをインストールさせられて、そのせいで色々揉めたが、結論としては呼び出し元の@vue/cli-plugin-typescriptの最新版を使ったらバグる。Ver4系にダウングレードしたらビルドが通る様になった
npm install @vue/cli-plugin-typescript@4

Vueのメソッドが呼べない問題は webpack.mix.js 下記を追加


mix.webpackConfig({
    resolve: {
        alias: {
        'vue$': 'vue/dist/vue.common.js' 
    
        }
    }
});
mix.vue();

以上です。

ここから下は検索のヒットのために書いてあるだけなので、特に興味がなければ読まなくていいです。

やったこと

ビルドさせようとすると・・・

We will use “npm” to install the CLI via “npm install -D webpack-cli”.
Do you want to install ‘webpack-cli’ (yes/no):

入れる必要があるのね。ということでそのままYesを選択してインストール。
みるどしてみると・・・

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[9] should be one of these:

だめやん。

今入っているLaravelMixは
“laravel-mix”: “^5.0.9”,

先のコマンドで追加されたWebPackは
“webpack-cli”: “^5.0.0”

色々調べてみたのだが、WebPackのバージョンが上がって色々破壊的な変更が加えられているらしい。つまりLaravel MixとWebpackのバージョンが合ってない可能性がある。

ということで、LaravelMixのGitHubを見に行ってみると・・・
現行バージョンはpeerDependenciesでwebpackの指定があるけど・・・

一つ前のバージョン5は指定がない

dependenciesに書いて合ったバージョンをいれてみたが、なぜかインストールができず。
Laravel-mixの方のバージョンを最新(Ver6)に上げてみた。
すると、エラーの内容が変わった
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

これは webpack.mix.js に

mix.vue();

を追記する。(これは公式に記載がある)
そしてまた別のエラーが発生。

Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (/var/www/html/node_modules/vue-loader/dist/index.js:71:34)

vue-loaderが何かおかしい様子。インストールするバージョンを変えてみたりしたがうまくいかず。
視点を変えて、vue-loaderは誰が使ってるんだろうか?

# npm ls vue-loader
└─┬ @vue/cli-plugin-typescript@5.0.8
└─┬ @vue/cli-service@5.0.8
└── vue-loader@17.0.1

@vue/cli-plugin-typescript が使っている。割と若いバージョンなので、試しに一つ前のメジャーバージョンを使ってみる
npm uninstall @vue/cli-plugin-typescript
npm install @vue/cli-plugin-typescript@4

ビンゴ!
これでビルド自体は通る様になりました。

ですが、実際にアクセスしてみると新たなエラーが発生

Uncaught TypeError: Vue.use is not a function

よくわからないのですが、なんでもランタイム版の軽量のVueが読み込まれてしまっているらしい。なんでそうなるかはわかりませんが、とにかく、webpack.mix.js 下記を追加すれば完全版のVue読み込まれて問題が解決しました。


mix.webpackConfig({
    resolve: {
        alias: {
        'vue$': 'vue/dist/vue.common.js' 
    
        }
    }
})
https://amzn.to/34e4cUQ
タイトルとURLをコピーしました