Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined を解決する

参照したページ

環境

私の環境で今回の件に関係ありそうなパッケージのバージョンは以下の通りです。

  • 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),
     }),