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

itpropro · 2021-09-06T03:22:11Z

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 ...

The text was updated successfully, but these errors were encountered:

antfu · 2021-09-06T03:46:21Z

That's weird, can you remove the ./node_modules/.cache and try again?

antfu · 2021-09-06T04:02:17Z

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?

danielroe · 2021-09-06T06:33:08Z

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

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

antfu · 2021-09-06T06:55:38Z

Closing this as this is not an issue of the project itself and an workaround is provided.

itpropro · 2021-09-06T11:35:08Z

Thanks for the provided workaround!

I've added it to my nuxt.config.json, but the problem still persists:

export default {
  // Fix to load .mjs modules correctly, see https://github.com/vueuse/vueuse/issues/718
  extend(config) {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
  },
...

Using nuxt 2.15.8 and @nuxtjs/composition-api 0.28.0. Would the workaround be to wait for Nuxt 2.16 to be released and hold back the update until then @danielroe?

antfu · 2021-09-06T17:33:59Z

Can you share a minimal reproduction? Thanks.

daopk · 2021-09-07T11:54:48Z

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

patrikengborg · 2021-09-08T07:52:39Z

Tried the proposed solution above from @daofresh, but now the error is this:

Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.esm.js' in '/Users/myuser/Code/myproject/node_modules/vue-demi/lib'

danielroe · 2021-09-08T07:57:29Z

@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).

patrikengborg · 2021-09-08T08:06:39Z

@danielroe I'm on node 14.17.5 and upgrading the composition api to latest seems to have solved it, thanks!
However, I get another error now vueDemi.getCurrentScope is not a function, when using the onClickOutside function, but I haven't investigated, so that might be on me.

itpropro · 2021-09-08T08:14:51Z

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

Thanks for your reply, I had it in my build config, but failed to copy the config correctly into this issue ;)

itpropro · 2021-09-08T08:24:17Z

@danielroe I'm on node 14.17.5 and upgrading the composition api to latest seems to have solved it, thanks!
However, I get another error now vueDemi.getCurrentScope is not a function, when using the onClickOutside function, but I haven't investigated, so that might be on me.

I had that problem with Nuxt, but fixed it by updating @vue/composition-api, that implemented these since v1.1

itpropro · 2021-09-08T08:34:39Z

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 :)

michealroberts · 2021-09-08T10:11:02Z

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

I can confirm that this also worked for me, Nuxt 2.15.7 and @nuxtjs/composition-api": "^0.27.0 (@vueuse/core v6.2.1)

SachinAgarwal1337 · 2021-09-12T16:54:54Z

@antfu I am using this library wih ionic 5 with vue and I am not able to resolve it this with given suggesions.
Any idea how can it be resolved for ionic?

sxzz · 2021-09-14T05:26:18Z

@antfu Hello, element-plus uses this library. Is there a way for users to use it with zero configuration? Thanks.

antfu · 2021-09-14T05:52:17Z

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:

Breaking in mjs enabled webpack 4 environments Akryum/vue-cli-plugin-apollo#57
Can't import the named export 'Component' from non EcmaScript module reactioncommerce/reaction-component-library#399 (comment)
Can't import the named export 'Component' from non EcmaScript module (only default export is available) formatjs/formatjs#1395
Latest ESM package support breaks build with webpack ProseMirror/prosemirror#1003

benoitlahoz · 2021-09-15T14:42:29Z

I've been trying to get rid of this error using the configuration proposed by @antfu in a Storybook + Vue + Typescript project.
Error doesn't show anymore, but Storybook Webpack server doesn't work anymore ("Cannot GET /").
Any idea for Storybook support?

trry-hub · 2021-10-19T09:02:42Z

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?

@antfu
我使用的是cli 这样配置本地可以正常运行，但在打包时，element-plus并没有被打包进项目

I used cli so that the configuration would work properly locally, but element-plus was not packaged into the project when it was packaged.

sxzz · 2021-10-25T12:37:44Z

@Bliangjs The problem you described has NOTHING to do with VueUse, please report issue to element-plus project.

sxzz · 2021-10-28T13:36:22Z

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

antfu closed this as completed Sep 6, 2021

FRSgit mentioned this issue Sep 7, 2021

Bug: v6.2.1 does not build #721

Closed

antfu changed the title ~~Nuxt build fails with .mjs/.cjs extensions~~ Nuxt / Webpack / Vue CLI build fails with v6.2.0 and above Sep 7, 2021

antfu pinned this issue Sep 7, 2021

antfu mentioned this issue Sep 7, 2021

Can't import errors #724

Closed

antfu mentioned this issue Sep 10, 2021

Can't use with composition api #738

Closed

antfu mentioned this issue Sep 14, 2021

error in ./node_modules/@vueuse/core/index.mjs Can't import the named export 'bypassFilter' from non EcmaScript module (only default export is available) #743

Closed

jzs11 mentioned this issue Sep 14, 2021

Error building after last update vueuse/vue-demi#63

Closed

xiaoxian521 mentioned this issue Sep 14, 2021

[Bug Report] Can't import the named export 'xxx' from non EcmaScript module element-plus/element-plus#3392

Closed

This was referenced Sep 14, 2021

feat: add @vueuse/core element-plus/element-plus#3370

Merged

D2M element-plus/element-plus#3386

Merged

antfu mentioned this issue Sep 15, 2021

Maybe vueuse's issue when compiling with Vue 3.2.10+ #750

Closed

webdesignberlin mentioned this issue Sep 16, 2021

Vue 3 + Storybook - Incompatibility with "@vueuse/core" library (and potentially all libraries that use export { x } from Y?) storybookjs/storybook#15990

Closed

sxzz mentioned this issue Oct 18, 2021

[Bug Report] Can't import the named export '***' from non EcmaScript module element-plus/element-plus#3923

Closed

sxzz mentioned this issue Oct 25, 2021

build!: simplify build & support esm import element-plus/element-plus#4018

Merged

3 tasks

sxzz mentioned this issue Oct 27, 2021

☝️ Breaking Change List element-plus/element-plus#162

Closed

antfu mentioned this issue Oct 28, 2021

refactor: use .mjs for module by default vuejs/composition-api#837

Merged

jgrauel mentioned this issue Nov 1, 2021

Compile Error vueuse/head#42

Closed

Jamiewarb mentioned this issue Nov 4, 2021

Fresh Nuxt 2 with @nuxtjs/composition-api and @vueuse/core not working #897

Closed

ryan-ludwig mentioned this issue Jan 28, 2022

VUE3 misc KvLightbox fixes kiva/kv-ui-elements#168

Merged

danielroe mentioned this issue Apr 5, 2022

fix: Can't import named export 'computed' from EcmaScript danielroe/vue-sanity#213

Closed

This was referenced Aug 4, 2022

'vue-demi' causes errors when importing (only the .mjs file breaks it) vitest-dev/vitest#1788

Closed

'vue-demi' causes errors when importing into Vitest test (only the .mjs file breaks it) vuejs/pinia#1521

Closed

Doctor-wu unpinned this issue Dec 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

itpropro commented Sep 6, 2021 •

edited

antfu commented Sep 6, 2021

antfu commented Sep 6, 2021 •

edited

danielroe commented Sep 6, 2021 •

edited

antfu commented Sep 6, 2021

itpropro commented Sep 6, 2021

antfu commented Sep 6, 2021

daopk commented Sep 7, 2021

patrikengborg commented Sep 8, 2021 •

edited

danielroe commented Sep 8, 2021 •

edited

patrikengborg commented Sep 8, 2021

itpropro commented Sep 8, 2021 •

edited

itpropro commented Sep 8, 2021

itpropro commented Sep 8, 2021

michealroberts commented Sep 8, 2021

SachinAgarwal1337 commented Sep 12, 2021 •

edited

sxzz commented Sep 14, 2021 •

edited

antfu commented Sep 14, 2021 •

edited

benoitlahoz commented Sep 15, 2021

trry-hub commented Oct 19, 2021

Nuxt

Vue CLI

sxzz commented Oct 25, 2021 •

edited

sxzz commented Oct 28, 2021

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

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

Comments

itpropro commented Sep 6, 2021 • edited

antfu commented Sep 6, 2021

antfu commented Sep 6, 2021 • edited

Nuxt

Vue CLI

danielroe commented Sep 6, 2021 • edited

antfu commented Sep 6, 2021

itpropro commented Sep 6, 2021

antfu commented Sep 6, 2021

daopk commented Sep 7, 2021

patrikengborg commented Sep 8, 2021 • edited

danielroe commented Sep 8, 2021 • edited

patrikengborg commented Sep 8, 2021

itpropro commented Sep 8, 2021 • edited

itpropro commented Sep 8, 2021

itpropro commented Sep 8, 2021

michealroberts commented Sep 8, 2021

SachinAgarwal1337 commented Sep 12, 2021 • edited

sxzz commented Sep 14, 2021 • edited

antfu commented Sep 14, 2021 • edited

benoitlahoz commented Sep 15, 2021

trry-hub commented Oct 19, 2021

Nuxt

Vue CLI

sxzz commented Oct 25, 2021 • edited

sxzz commented Oct 28, 2021

itpropro commented Sep 6, 2021 •

edited

antfu commented Sep 6, 2021 •

edited

danielroe commented Sep 6, 2021 •

edited

patrikengborg commented Sep 8, 2021 •

edited

danielroe commented Sep 8, 2021 •

edited

itpropro commented Sep 8, 2021 •

edited

SachinAgarwal1337 commented Sep 12, 2021 •

edited

sxzz commented Sep 14, 2021 •

edited

antfu commented Sep 14, 2021 •

edited

sxzz commented Oct 25, 2021 •

edited