Nuxt.jsプロジェクトをv2(nuxt-edge)にアップグレードした際にハマったところ

今日の朝に以下の記事を拝見したので早速アップグレードしました。ほぼほぼこちらの記事をみてアップグレードすれば問題無いかと思います。

【実録】Nuxt.jsの既存プロジェクトを一足早くNuxt v2(nuxt-edge)へとアップグレードする方法

自分は以下の2点でエラーが出ていましたので修正しました。

Module build failed: TypeError: Cannot read property 'eslint' of undefined

Module build failed: TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (nuxt-app/node_modules/eslint-loader/index.js:148:18)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

こちら解決法はESLintのloaderが読めていないということなのでnuxt.config.jsを以下のように書き換えましょう。

nuxt.config.js
module.exports = {
  build: {
    /* before 
    extend(config, { isClient, isDev }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    } */
    /* after */
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}  

冒頭の記事にも記載がありますが、isClientisDevが廃止になったのが原因です。

Pugエラー(These relative modules were not found)

These relative modules were not found:

* ./index.vue?vue&type=template&id=2a183b29&lang=pug in ./pages/index.vue

どうやらNuxt.js v2からはpugのloaderがデフォルトでは入っていないようなので以下のコマンドでpugのloaderを追加しましょう。

# npm
$ npm i -D pug-plain-loader
# yarn
$ yarn add --dev pug-plain-loader

Webpack4が使われてるのでたしかにビルドの体感速度は速くなっているような気がします。まだv2にアップグレードしただけなので細かい部分は確認できていませんが、ハマったところがあれば適宜追記していきます。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.