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

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?

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"
      });
    }
  }
}

Likely this should be included by default for wp4 in Vue CLI. It should already be present in next version of Nuxt (2.16): https://github.com/nuxt/nuxt.js/pull/9180

And it is already injected by @nuxtjs/composition-api when that is being used

If you’re using Vue CLI 4, please upgrade to latest version. https://github.com/vuejs/vue-cli/releases/tag/v4.5.15

The way I see it is that Webpack 4 should release a patch to have built-in support for .mjs files (Note that Webpack 5, Vite, Rollup are working fine with this). Giving the whole ecosystem is moving in that direction, it’s not a problem that is only limited to this library.

For some context:

• https://github.com/Akryum/vue-cli-plugin-apollo/issues/57
• https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022
• https://github.com/formatjs/formatjs/issues/1395
• https://github.com/ProseMirror/prosemirror/issues/1003

Can you share a minimal reproduction? Thanks.

I cannot reproduce it with a new nuxt repo, so it has to be somewhere in my configuration or modules. I will have to fix that myself 😃

@patrikengborg Would you check whether there is a problem when you upgrade to the latest version of node 12 or 14 (and also ensure you are using the latest version of vue composition API).