element-plus: [Bug Report] [All] Uncaught SyntaxError: The requested module '/_nuxt/node_modules/dayjs/dayjs.min.js?v=391d0c11' does not provide an export named 'default' (at picker2.mjs?v=391d0c11:2:8)

Bug Type: Other

Environment

  • Vue Version: 3.2.33
  • Element Plus Version: 2.2.4
  • Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36
  • Build Tool: Nuxt

Reproduction

Related Component

  • All

Reproduction Link

CodeSandbox

Steps to reproduce

add element-plus to fresh nuxt project. example in codesandbox https://codesandbox.io/s/wizardly-wilbur-e7ngpy?file=/app.vue:0-1097

What is Expected?

expected to work in development with no errors. it works fine in build.

What is actually happening?

what happen that i got this error

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/dayjs/dayjs.min.js?v=391d0c11' does not provide an export named 'default' (at picker2.mjs?v=391d0c11:2:8)

you can see error in console https://e7ngpy.sse.codesandbox.io/

and js dont work. components appear fine but not working.

Additional comments

I tried starter repo but it have issues. https://github.com/element-plus/element-plus-nuxt-starter/issues/34

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 3
  • Comments: 32 (8 by maintainers)

Most upvoted comments

dayjs

If you encounter this issues, you can try adding dayjs to the nuxt.config

export default defineNuxtConfig({
vite: {
    optimizeDeps: {
      include: ['dayjs', 'dayjs/plugin/*']
    }
  }
})

It’s still keep the same issue.

If you encounter this issues, you can try adding dayjs to the nuxt.config

export default defineNuxtConfig({
vite: {
    optimizeDeps: {
      include: ['dayjs', 'dayjs/plugin/*']
    }
  }
})

I’ve reproduced it here: https://stackblitz.com/edit/github-spueta?file=app.vue Please note that the code about time picker is in app.vue:

<ElDatePicker />

Also, there are two package-lock.json file, one is named as package-lock-backup.json. This issue will be reproduced with package-lock.json and not with package-lock-backup.json

Commands:

rm -r node_modules .nuxt
npm i
npx nuxt prepare

Please note that this may not be produced on Windows

Please reproduce it in stackblitz, I also cannot reproduce it on local machine.

image

Yes I agree that may related to dependencies, and the elemen-plus version remains the same, but it’s hard to locate the issue.

At present, the dayjs is based on CommonJS Modules. It seems that there is a conflict when you use unplugin-vue-components like this. Maybe you need to manually introduce required components like template. Wait for the dayjs dependency upgrade to 2.0.