Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt / Webpack / Vue CLI build fails with v6.2.0 and above

See original GitHub issue

Since 6.2.0, Nuxt fails to build (I think because of the changed file extensions):

[fatal] Nuxt build error
  ERROR in ./node_modules/@vueuse/core/index.mjs 800:50-62
  Can't import the named export 'bypassFilter' from non EcmaScript module (only default export is available)
  @ ./layouts/default.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--2-0!./node_modules/babel-loader/lib??ref--2-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&)
  @ ./layouts/default.vue?vue&type=script&lang=js&
  @ ./layouts/default.vue
  @ ./node_modules/.cache/nuxt/App.js
  @ ./node_modules/.cache/nuxt/index.js
  @ ./node_modules/.cache/nuxt/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/composition-api/register.js ./node_modules/.cache/nuxt/client.js
  
  ERROR in ./node_modules/@vueuse/core/index.mjs 3271:25-30
  Can't import the named export 'clamp' from non EcmaScript module (only default export is available)
  @ ./layouts/default.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--2-0!./node_modules/babel-loader/lib??ref--2-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&)
  @ ./layouts/default.vue?vue&type=script&lang=js&
  @ ./layouts/default.vue
  @ ./node_modules/.cache/nuxt/App.js
  @ ./node_modules/.cache/nuxt/index.js
  @ ./node_modules/.cache/nuxt/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/composition-api/register.js ./node_modules/.cache/nuxt/client.js

4500+ lines ...

Issue Analytics

State:
Created 2 years ago
Reactions:6
Comments:21 (15 by maintainers)

Top GitHub Comments

24reactions

antfucommented, Sep 8, 2021

I found this can confirmed it fixes the same issue on Vue CLI

https://stackoverflow.com/a/64907659

Nuxt

// nuxt.config.js

module.exports = {
  build: {
    extend (config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      })
    }
  }
}

Vue CLI

// vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [{
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }]
    }
  }
}

/cc @pi0 @danielroe @sodatea I am not super familiar what is going on internally in webpack, but if this fix makes sense, should we include it by default in Nuxt / Vue CLI?

5reactions

daopkcommented, Sep 7, 2021

Nuxt

The extend method is an option of the build property, so the correct configuration should be

// nuxt.config.js

export default {
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      });
    }
  }
}