Nuxt.jsのbuildでcore-jsのエラーが出る

nuxt.jsJavascript

※ issueを再確認すると別の解法のレスがあったので追記します。(2020/06/25追記)

エラーの内容

Nuxt.js + Vuetifyの環境でbuildすると、下記のようなエラーが出るようになりました。

Module not found: Error: Can't resolve 'core-js/modules/...' in '/app/...'

buildログを一部抜粋

$ yarn build

...

ERROR in ./node_modules/vuetify/lib/components/VTabs/VTabs.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in '/app/node_modules/vuetify/lib/components/VTabs'
 @ ./node_modules/vuetify/lib/components/VTabs/VTabs.js 3:0-42
 @ ./node_modules/vuetify/lib/components/VTabs/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./.nuxt/vuetify/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

ERROR in ./node_modules/vuetify/lib/components/VTabs/VTabsBar.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in '/app/node_modules/vuetify/lib/components/VTabs'
 @ ./node_modules/vuetify/lib/components/VTabs/VTabsBar.js 6:0-42
 @ ./node_modules/vuetify/lib/components/VTabs/VTabs.js
 @ ./node_modules/vuetify/lib/components/VTabs/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./.nuxt/vuetify/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

ERROR in ./pages/login.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/login.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in '/app/pages'
 @ ./pages/login.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/login.vue?vue&type=script&lang=js&) 3:0-42
 @ ./pages/login.vue?vue&type=script&lang=js&
 @ ./pages/login.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

 FATAL  Nuxt build error                                                                                                                                                                                                                                                        06:14:11

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5314:21)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5263:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5597:5)
  at async Generator.initiate (node_modules/@nuxt/generator/dist/generator.js:70:7)
  at async Generator.generate (node_modules/@nuxt/generator/dist/generator.js:40:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:96:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2575:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

error Command failed with exit code 1.

対策

対策①

モジュールを最新にしても解決せず。

調べているとこんなissueが上がっていました。

Module not found: Error: Can't resolve 'core-js/modules/es6.array.iterator' in '/app/.nuxt' · Issue #5287 · nuxt/nuxt
Version v2.4.5 Reproduction link Steps to reproduce just remove your node_modules and npm install and npm run build What is expected ? build success What is ac...

core-jsが3.xになるとエラーが起きるらしいです。

2系の最新版(2019/12/10時点)をインストールするように明記

$ yarn add core-js@2.6.11
$ yarn build

成功!

ビルドするとcore-jsを3系にしろとwarningが出るようになったので対策を考えないと。。。

▽=== 2020/06/25追記 ===▽

対策②

https://github.com/nuxt/nuxt.js/issues/5287#issuecomment-622660147 に別の解法が載っていました。
こちらだとcore-js 3.xにあげても問題なく動作します。

nuxt.config.jsに下記を追加

export default {
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            // require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
            {
              buildTarget: isServer ? 'server' : 'client',
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

package.jsonに「core-js」を追加していたら、記述を削除
(package.jsonに明示的に書かなくても問題ありません。)

下記の依存関係の確認でも古いバージョンを使っていると怒られなくなりました。

$ yarn outdated

なお、このやり方はNuxt.js v2.6.0時点のリリースノートに書かれているようです。

△=== 2020/06/25追記 ===△

コメント

タイトルとURLをコピーしました