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

melrefaie commented 2 years ago

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

tolking commented 2 years ago

May be fixed in #8144 , you can try the latest version v2.2.5

aspiiire commented 2 years ago

I still have the same issue, I have the version 2.2.8 running on Ubuntu

KahrLu commented 2 years ago

still have the same issue, I have the version 2.2.13 running dev locally

lvbaiying commented 2 years ago

still have the same issue, I have the version 2.2.14 running dev locally

BitRayDev commented 2 years ago

still have the same issue, I have the version 2.2.17 running dev locally

wxxwtt commented 2 years ago

still have the same issue, I have the version 2.2.17 running dev locally

chaselen commented 2 years ago

still have the same issue, I have the version 2.2.18 running dev locally

tolking commented 2 years ago

The error cannot be reproduced using the element-plus-nuxt-starter

chaselen commented 2 years ago

@tolking 重现办法

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.11",
    "unplugin-vue-components": "^0.22.8"
  },
  "dependencies": {
    "element-plus": "^2.2.18"
  }
}

nuxt.config.ts

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  build: {
    transpile: ['element-plus/es']
  },
  vite: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

app.vue

<template>
  <div>
    <el-button type="primary">test</el-button>
  </div>
</template>

tolking commented 2 years ago

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.

zhang20084 commented 1 year ago

still have the same issue, I have the version 2.2.19 running dev locally

georginklv commented 1 year ago

Still have this issue!

tolking commented 1 year ago

I can not reproduce this issue by element-plus-nuxt-starter, can you provide a demo?

AnzhiZhang commented 1 year ago

I still have this issue on 2.3.7, and I check code in element plus, there are still some improts like import type { Dayjs } from 'dayjs'

 ERROR  Error while requiring module @element-plus/nuxt: TypeError: _dayjs.default.extend is not a function                                                               00:31:08

 ERROR  _dayjs.default.extend is not a function                                                                                                                           00:31:08

  at node_modules/element-plus/es/components/time-picker/src/time-picker.mjs:10:16
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/time-picker/index.mjs:1:2184
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/src/date-table.mjs:2:1
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/src/date-table2.mjs:3:18

 ERROR  Error while requiring module @element-plus/nuxt: TypeError: _dayjs.default.extend is not a function                                                               00:28:11

 ERROR  _dayjs.default.extend is not a function                                                                                                                           00:28:11

  at node_modules/element-plus/es/components/time-picker/src/time-picker.mjs:10:16
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/time-picker/index.mjs:1:2184
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/src/date-table.mjs:2:1
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/src/date-table2.mjs:3:18
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/src/calendar2.mjs:4:41
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/components/calendar/index.mjs:2:40
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/element-plus/es/component.mjs:9:15
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/@element-plus/nuxt/dist/module.mjs:2:41
  at evalModule (node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/jiti/dist/jiti.js:1:253034)
  at requireModule (node_modules/@nuxt/kit/dist/index.mjs:2244:26)
  at loadNuxtModuleInstance (node_modules/@nuxt/kit/dist/index.mjs:2435:90)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2408:47)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:3231:7)
  at async loadNuxt (node_modules/nuxt/dist/index.mjs:3304:5)
  at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:2537:19)
  at async Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:31:18)
  at async _main (node_modules/nuxi/dist/cli.mjs:49:20)

yunimm commented 1 year ago

still have the same issue, I have the version 3.6.2 running dev locally

AnzhiZhang commented 1 year ago

try delete package-lock.json and reinstall packages, it works for me.

Gutwql commented 1 year ago

still have the same issue, I have the version 2.4.1 running dev locally

hardik-wts commented 12 months ago

node = 18.18.2 os = macOS big sur 11.6.3 Version Details

"devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.2",
    "nuxt": "^3.7.0"
  },
  "dependencies": {
    "@element-plus/nuxt": "^1.0.5",
    "@iconify/json": "^2.2.116",
    "@nuxt/ui": "^2.8.1",
    "@pinia/nuxt": "^0.4.11",
    "bootstrap": "^5.2.3",
    "pinia": "^2.1.6",
    "sass": "^1.66.1",
    "sass-loader": "^13.3.2",
    "vue-select": "^3.20.2",
    "vue3-otp-input": "^0.4.1"
  },

I am still facing same proble in postinstall command

Using default Tailwind CSS file                                                                     nuxt:tailwindcss 12:34:14 AM

 ERROR  Error while requiring module @element-plus/nuxt: TypeError: _dayjs.default.extend is not a function             12:34:15 AM

 ERROR  _dayjs.default.extend is not a function                                                                         12:34:15 AM

  at node_modules/element-plus/es/components/time-picker/src/time-picker.mjs:10:16
  at evalModule (node_modules/jiti/dist/jiti.js:1:255614)
  at jiti (node_modules/jiti/dist/jiti.js:1:253542)
  at node_modules/element-plus/es/components/time-picker/index.mjs:1:2184
  at evalModule (node_modules/jiti/dist/jiti.js:1:255614)
  at jiti (node_modules/jiti/dist/jiti.js:1:253542)
  at node_modules/element-plus/es/components/calendar/src/date-table.mjs:2:1
  at evalModule (node_modules/jiti/dist/jiti.js:1:255614)
  at jiti (node_modules/jiti/dist/jiti.js:1:253542)
  at node_modules/element-plus/es/components/calendar/src/date-table2.mjs:3:18 

 ERROR  _dayjs.default.extend is not a function                                                                         12:34:15 AM

npm ERR! code 1
npm ERR! path my-project-path
npm ERR! command failed
npm ERR! command sh -c nuxt prepare

npm ERR! A complete log of this run can be found in: /Users/lenovo/.npm/_logs/2023-10-25T19_04_09_552Z-debug-0.log

ralix commented 11 months ago

same issue in a new nuxt project, any solution?

ERROR Error while requiring module @element-plus/nuxt: TypeError: _dayjs.default.extend is not a function 19:21:46

ERROR Cannot start nuxt: _dayjs.default.extend is not a function 19:21:46

at (packages/components/time-picker/src/time-picker.tsx:9:14) at evalModule (node_modules/jiti/dist/jiti.js:1:256443) at jiti (node_modules/jiti/dist/jiti.js:1:254371) at node_modules/element-plus/es/components/time-picker/index.mjs:1:2184 at evalModule (node_modules/jiti/dist/jiti.js:1:256443) at jiti (node_modules/jiti/dist/jiti.js:1:254371) at node_modules/element-plus/es/components/calendar/src/date-table.mjs:2:1 at evalModule (node_modules/jiti/dist/jiti.js:1:256443) at jiti (node_modules/jiti/dist/jiti.js:1:254371) at node_modules/element-plus/es/components/calendar/src/date-table2.mjs:3:18

wangyewei commented 10 months ago

there is still the original problem, why was this issue closed?

tolking commented 10 months ago

I can not reproduce this issue in the element-plus-nuxt-starter, can you provide a demo?

perhaps you can reinstall or update the dependencies

AnzhiZhang commented 9 months ago

there is still the original problem, why was this issue closed?

 ERROR  Error while requiring module @element-plus/nuxt: TypeError: _dayjs.default.extend is not a function

 ERROR  _dayjs.default.extend is not a function

  at node_modules/element-plus/es/components/time-picker/src/time-picker.mjs:10:16
  at evalModule (node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/jiti/dist/jiti.js:1:254371)
  at node_modules/element-plus/es/components/time-picker/index.mjs:1:2184
  at evalModule (node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/jiti/dist/jiti.js:1:254371)
  at node_modules/element-plus/es/components/calendar/src/date-table.mjs:2:1
  at evalModule (node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/jiti/dist/jiti.js:1:254371)
  at node_modules/element-plus/es/components/calendar/src/date-table2.mjs:3:18

 ERROR  _dayjs.default.extend is not a function

tolking commented 9 months ago

I've never reproduced this issue. You can use element-plus-nuxt-starter testing, or provide a demo that can reproduce this issue.

AnzhiZhang commented 9 months ago

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

tolking commented 9 months ago

Sorry, I am unable to run the demo you provided properly. (macos 14, node 21.2.0)

Cannot find module './shared/untyped.a47b2336.cjs'

When I convert the package-lock.json file through pnpm import, it can run normally in pnpm.

pnpm import package-lock.json

//.npmrc

shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true
legacy-peer-deps=true

Since you have provided a lock file that run normally, perhaps the cause of the issues is related to the installation dependencies.

AnzhiZhang commented 9 months ago

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

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

beerui commented 7 months ago

在nuxt.config.ts中，加入配置项

export default defineNuxtConfig({
  ssr: true,
  build: {
    transpile: ['element-plus/es', 'loadsh'],
  },
})

这个对我有用！我的版本是："element-plus": "^2.6.1", "@element-plus/nuxt": "^1.0.7",

tolking commented 7 months ago

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

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

chhumsina commented 6 months ago

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.