参照したページ
環境
私の環境で今回の件に関係ありそうなパッケージのバージョンは以下の通りです。
- webpack: 4.46.0
- vue: 3.4.21
- vue-router: 4.3.0
経緯
Vue2からVue3にアップグレードする作業をして、Railsのsystem specをローカルで実行すると全て成功するのに、git pushしてbuildkiteで実行すると全て失敗していました。
capybaraでconsoleの出力をしてみると以下のエラーが出力されました。
Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
修正する
私の場合は webpack.config.js の resolve.alias で vue.esm-browser.js
を設定していたのが間違いで、 vue.esm-bundler.js
に修正しました。
以下の通り設定しました。
resolve: { alias: { 'vue$': 'vue/dist/vue.esm-bundler.js', }, },
その他
それでも直らないとか困った場合は vue.js - ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined - Stack Overflow にあるように、以下の通り定数を定義すると一応修正できそうな気がします。
new webpack.DefinePlugin({ '__VUE_PROD_DEVTOOLS__': JSON.stringify(false), }),