search

element-plus / element-plus-nuxt

Element Plus module for Nuxt
MIT License
125 stars 14 forks source link

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

Closed JL-Code closed 3 months ago

JL-Code commented 3 months ago

` ERROR _dayjs.default.extend is not a function 22:54:35

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 `

{
"devDependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@element-plus/nuxt": "^1.0.7",
    "@heroicons/vue": "^2.1.1",
    "@livechat/widget-vue": "^1.3.2",
    "@nuxt/devtools": "^1.0.6",
    "@nuxt/image": "^1.2.0",
    "@nuxt/types": "^2.17.2",
    "@nuxt/typescript-build": "^3.0.2",
    "@nuxtjs/device": "^3.1.1",
    "@nuxtjs/google-fonts": "^3.1.3",
    "@nuxtjs/tailwindcss": "^6.10.3",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
    "@splidejs/vue-splide": "^0.6.12",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.10",
    "@types/js-cookie": "^3.0.6",
    "@types/node": "^20.10.4",
    "@types/numeral": "^2.0.5",
    "@vueuse/nuxt": "^10.7.2",
    "chalk": "^5.3.0",
    "class-variance-authority": "^0.7.0",
    "dayjs": "^1.11.10",
    "dayjs-nuxt": "^2.1.9",
    "element-plus": "^2.4.4",
    "js-cookie": "^3.0.5",
    "less": "^4.2.0",
    "md-editor-v3": "^4.9.0",
    "numeral": "^2.0.6",
    "nuxt": "^3.10.0",
    "nuxt-bugsnag": "^7.2.3",
    "nuxt-delay-hydration": "^1.3.3",
    "nuxt-gtag": "^1.1.1",
    "nuxt-headlessui": "^1.1.5",
    "oidc-client-ts": "^2.4.0",
    "pinia": "^2.0.0",
    "rollup-plugin-gzip": "^3.1.0",
    "sass": "^1.69.5",
    "typescript": "^5.3.3"
  }
}
gapgag55 commented 3 months ago

Still same problem

gapgag55 commented 3 months ago

@JL-Code element-plus v2.6.3 and element-plus/nuxt v1.0.6 was solved

JL-Code commented 3 months ago

@JL-Code element-plus v2.6.3 and element-plus/nuxt v1.0.6 was solved

I used this element-plus-nuxt-starter pnpm-lock.yml

image
ufvnkde7194 commented 3 months ago

same problem

tmmsmoreira commented 3 months ago

I am having the same problem. And is only happening using npm and not pnpm.

trandaison commented 3 months ago

The problem was element-plus v2.7.0 it self. I've run into this issue as well, for me, @element-plus/nuxt v1.0.8 and element-plug v2.6.3 is working.

tolking commented 3 months ago

try

export default defineNuxtConfig({
vite: {
    optimizeDeps: {
      include: ['dayjs', 'dayjs/plugin/*', 'element-plus']
    }
  }
})
alxpereira commented 3 months ago

Same issue, rollback to 2.6.3 was necessary

chendaozhun commented 3 months ago

https://codesandbox.io/p/devbox/wonderful-elion-wm8dqg?file=%2Fpackage.json%3A8%2C33

zhang20084 commented 3 months ago

同样的问题，请问解决了吗

Ena-Heleneto commented 3 months ago

The problem was element-plus v2.7.0 it self. I've run into this issue as well, for me, @element-plus/nuxt v1.0.8 and element-plug v2.6.3 is working.

I tried it but it doesn't work

image

Ena-Heleneto commented 3 months ago

I only have this problem in linux environment

trandaison commented 3 months ago

@Ena-Heleneto You are using element-plus ^2.5.3 in package.json. That's mean the package manager will install the 2.x.y with the x and y are latest (in this case, it's 2.7.0, it's not 2.5.3 as you thought). You can check which version was actually installed in lock file.

You should specify a version instead. try this:

-    "element-plus": "^2.5.3",
+    "element-plus": "2.6.3",
Ena-Heleneto commented 3 months ago

@Ena-Heleneto You are using element-plus ^2.5.3 in package.json. That's mean the package manager will install the 2.x.y with the x and y are latest (in this case, it's 2.7.0, it's not 2.5.3 as you thought). You can check which version was actually installed in lock file.

You should specify a version instead. try this:

-    "element-plus": "^2.5.3",
+    "element-plus": "2.6.3",

Yes, it worked, thank you

houko commented 3 months ago

直接改package.json里的文件再install是不生效的，默认 @element-plus/nuxt 会去安装2.7.0的element-plus

    "@element-plus/nuxt": "^1.0.8",
    "element-plus": "^2.6.3",

需要手动去执行安装一下指定版本 pnpm i -D @element-plus/nuxt@=1.0.8 element-plus@=2.6.3，暂时可以解决这个问题。

❯ pnpm i -D @element-plus/nuxt@=1.0.8 element-plus@=2.6.3
Downloading registry.npmjs.org/element-plus/2.6.3: 8.69 MB/8.69 MB, done
Packages: +2 -2
++--
Progress: resolved 901, reused 852, downloaded 1, added 2, done

devDependencies:
- element-plus 2.7.0
+ element-plus 2.6.3 (2.7.0 is available)

❯ pnpm run dev

> nuxt-app@ dev nuxt-vueuse-examples
> nuxt dev

Nuxt 3.11.2 with Nitro 2.9.6                                                                                                                           11:33:49
                                                                                                                                                       11:33:50
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file                                                                                                    nuxt:tailwindcss 11:33:51
  ➜ DevTools: press Shift + Option + D in the browser (v1.1.5)                                                                                         11:33:51

CONFIG PROVIDER:  [Function (anonymous)]                                                                                                               11:33:51
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                                                  nuxt:tailwindcss 11:33:51

 WARN  Failed to resolve dependency: dayjs, present in 'optimizeDeps.include'                                                                          11:33:52

✔ Nuxt Nitro server built in 1487 ms                                                                                                            nitro 11:33:54
ℹ Vite server warmed up in 2273ms                                                                                                                     11:33:54
ℹ Vite client warmed up in 2690ms
haozileung commented 3 months ago

After some investgation, I think this issue is related to vite build process. The vite is not resolving the dayjs package as excepted.

Even if add the vite config

optimizeDeps: {
  include: ['dayjs', 'dayjs/plugin/*', 'element-plus']
}

For the fix, we will need to update the dayjs import to esm style when using vite and nuxt3 in time-picker.mjs

import dayjs from 'dayjs/esm'
import customParseFormat from 'dayjs/esm/plugin/customParseFormat';

in date-picker.mjs

import dayjs from 'dayjs/esm'
import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
import advancedFormat from 'dayjs/esm/plugin/advancedFormat';
import localeData from 'dayjs/esm/plugin/localeData';
import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
import weekYear from 'dayjs/esm/plugin/weekYear';
import dayOfYear from 'dayjs/esm/plugin/dayOfYear';
import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore';

Related to this PR in dayjs https://github.com/iamkun/dayjs/pull/2543