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

LaravelMix+Vue2をTypeScriptに対応させるべく色々やっていたのだが色々はまりましたので、その時の忘備録です。こんなののために１日潰れました。
いまさら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の指定があるけど・・・

laravel-mix/package.json at master · laravel-mix/laravel-mix

The power of webpack, distilled for the rest of us. - laravel-mix/laravel-mix

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

laravel-mix/package.json at v5 · laravel-mix/laravel-mix

The power of webpack, distilled for the rest of us. - laravel-mix/laravel-mix

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' 
    
        }
    }
})

Amazon.co.jp

結論だけ先に

やったこと

タグ