Nuxt.js: [edge] Module build failed: TypeError: Cannot read property 'eslint' of undefined

[tdhulster]

Version

edge

Reproduction link

https://github.com/tdhulster/nuxt-edge

Steps to reproduce

npm install -g vue-cli
vue init nuxt-community/starter-template nuxt-test
npm uninstall nuxt
npm install nuxt-edge -S
npm run dev

What is expected ?

No error is thrown

What is actually happening?

Following error is thrown:
Module build failed: TypeError: Cannot read property 'eslint' of undefined
at Object.module.exports (/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.

Additional comments?

All comments and steps can be found in Readme as well

_{This bug report is available on Nuxt.js community (#c6888)}

[syffs]

@tdhulster isClient was removed in nuxt-edge, it should be replaced by process.client in your nuxt.config.js as below:

extend (config, { isDev }) {
  if (isDev && process.client) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }
}

[tdhulster]

AHA! Damn, so simple :) Thank you!

I didn't look into it since the blogpost stated that everything would be magically migrated.

💡 MIGRATION TIP: The good news is that you don’t need to change a single line of code in your project. Everything will be magically migrated as soon as you upgrade to Nuxt 2.

And therefore overlooked this one:

Remove deprecated features from Nuxt 1.0 : Removed context.isServer and context.isClient (Use process.client and process.server)

Issue can be closed I guess but might be usefull for other people having the same issue.

[amoshydra]

@tdhulster @syffs
For some reason, process.client return undefined on my end. I was able to configure eslint correctly using ctx.isClient instead.

I believe the correct configuration should be using ctx.isClient instead of process.client inside the build extend function.

  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }

See the nuxt.config in the updated starter-template https://github.com/nuxt-community/starter-template/commit/a2d4038ef3ca1965cfce08d245b47936f305afd7

Related clarification regarding to this confusion: https://github.com/nuxt/nuxt.js/issues/3145

Also, I believe that the reason process.server, process.client, process.browser being undefined at this stage is due to both client.js or server.js not being executed yet at the moment.

[cmty[bot]]

This bug-report has been fixed by @syffs.

See comment

[Legym]

I was able to find a workaround: https://github.com/webpack/webpack/issues/6556#issuecomment-367809483

build: {
    extend(config, { isDev, isClient }) {
      // Run ESLint on save
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({ options: {} })
    ]
  },

I couldn't get the build to lint if I use process.client. However reverting back to the old legacy isClient was able to work. I am having the same issues as @amoshydra where process.client was undefined

Update: I updated the npm packageeslint-loader to the latest and it's fixed.

[XanderLuciano]

@syffs Your comment would inadvertently disable linting (and thus just disable any linting errors) because process.client is undefined at this point. The correct solution to this issue would be be to update dependencies according to this PR: https://github.com/nuxt-community/starter-template/pull/86

Since your comment is so popular (and ranks highly on google for 'nuxt eslint errors') it would be helpful if you could update your comment 🙂

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.