Uncaught Error: Dynamic require of "@vueuse/core" is not supported at chunk-EABY2BFN.js:26 at node_modules/element-plus/lib/hooks/use-modal/index.js (element-plus_lib.js:7476) at __require2 (chunk-EABY2BFN.js:32) at node_modules/element-plus/lib/hooks/index.js (element-plus_lib.js:10983) at __require2 (chunk-EABY2BFN.js:32) at node_modules/element-plus/lib/make-installer.js (element-plus_lib.js:11039) at __require2 (chunk-EABY2BFN.js:32) at node_modules/element-plus/lib/defaults.js (element-plus_lib.js:65543) at __require2 (chunk-EABY2BFN.js:32) at node_modules/element-plus/lib/index.js (element-plus_lib.js:65921)

  <div>
    <el-dropdown>
      <span>
        test
      </span>
      <template #dropdown>
        <div>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </div>
      </template>
    </el-dropdown>
  </div>

https://github.com/209/element-plus-nuxt-starter

Cannot find module 'D:\web\node_modules\lodash\isEqual' imported from D:\web\node_modules\element-plus\es\components\time-picker\src\common\picker.vue_vue&type=script&lang .mjs

执行命令yarn build报错： yarn版本：1.22.10 node版本：16.11.1 npm版本：8.1.0 系统：archlinux ` ERROR Could not resolve './use-prevent-globalThis' from ./use-prevent-globalThis?commonjs-external 21:02:42

ERROR Could not resolve './use-prevent-globalThis' from ./use-prevent-globalThis?commonjs-external 21:02:42

at error (node_modules/rollup/dist/shared/rollup.js:158:30) at ModuleLoader.handleResolveId (node_modules/rollup/dist/shared/rollup.js:22263:24) at node_modules/rollup/dist/shared/rollup.js:22257:26

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. `

Hello,

Using the latest version of this repository, after git clone, yarn install and yarn run dev, when you you access the localhost:3000 the following error is printed in the console:

[Vue warn]: Unhandled error during execution of watcher callback at <ElPopperTrigger id="el-id-5038-0" virtual-ref=undefined open=false ... >

ERROR [worker] Element is not defined

at isElement$1 (node_modules/element-plus/dist/index.full.js:2144:43) at vue.watch.immediate (node_modules/element-plus/dist/index.full.js:7453:13) at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22) at callWithAsyncErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:166:21) at doWatch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1744:13) at Object.watch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1656:12) at setup (node_modules/element-plus/dist/index.full.js:7452:11) at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22) at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6977:29) at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6933:11)

ERROR [proxy] connect ENOENT /var/folders/sw/sbmrkj352zb87qyhrv3c22jh0000gn/T/nitro/worker-1474-1.sock

Does this need to be installed again?

1. It says "nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding".https://v3.nuxtjs.org/guide/concepts/typescript。

2.I do not install typescript, but I still have type verification.

我用的是mjs,然后在vite external这一步就报错了，无法拆分 这是我的配置文件：

import { defineNuxtConfig } from "nuxt";

const isProd = process.env.NODE_ENV === "production";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://unpkg.com/browse/[email protected]/dist/index.full.min.mjs",
          type: "module",
        },
      ],
    },
  },
  // css
  css: ["element-plus/dist/index.css"],
  target: "static",
  components: true,
  // build
  build: {
    transpile: isProd ? ["element-plus"] : [],
  },
  experimental: {
    viteNode: true,
  },
  vite: {
    build: {
      rollupOptions: {
        external: ["element-plus"],
      },
    },
  },
});

控制台log:

 WARN  [Vue warn]: Unhandled error during execution of setup function                                                                                                                                                                  10:22:24
  at <ElButton class="y-button main__start" data-v-26e30a3a="" >


 ERROR  [nuxt] [request error] Cannot read properties of null (reading 'setupContext')                                                                                                                                                 10:22:24
  at getContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6018:14)  
  at useSlots (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6011:12)  
  at setup (./node_modules/.pnpm/[email protected]/node_modules/element-plus/es/components/button/src/button4.mjs:25:19)  
  at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23)  
  at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30)  
  at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12)  
  at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17)  
  at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12)  
  at _sfc_ssrRender$1 (./.nuxt/prerender/chunks/app/server.mjs:4087:32)  
  at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13)

  ├─ / (2034ms) (Error: [500] Internal Server Error)                                 

When I try it on my local environment, I get the following error.

env: { "nuxt": "^3.0.0-rc.3", "element-plus": "^2.2.0", }

Hi, element-plus-nuxt-starter team! I'm using Element-plus with Nuxt3. That's where I encountered the problem in the issue title.

In the code, they are separate components, but each option is displayed together as shown in the image.

I just added the code to this repository, is this a problem with the way it is written? Or is this a problem in the Nuxt3 situation?😔

Please advise🙇

  const { app, router, head } = createApp()

  app.provide(ID_INJECTION_KEY, {
    prefix: Math.floor(Math.random() * 10000),
    current: 0,
  })

https://github.com/element-plus/element-plus/issues/7963#issuecomment-1140478437

https://element-plus.org/en-US/guide/theming.html#by-scss-variables https://stackoverflow.com/questions/72512042/how-to-change-colors-of-a-tempa-element-plus-in-nuxt3 It doesn't work.

fix #50, close #47, close #32

close #36, close #27, close #23

About teleport component in Vue

The Teleport component is used internally by multiple components in Element Plus (eg. ElDialog, ElDrawer, ElTooltip, ElDropdown, ElSelect, ElDatePicker ...)

There may be some SSR problems with teleport, so you should pay attention to the following precautions.

1. The teleported attribute in all components based on ElTooltip should be consistent, it is recommended to use the default value.
2. The append-to-body attribute value of ElDialog and ElDrawer should be consistent, it is recommended to enable the append-to-body.
3. When the ElSubMenu component has a multi-layer popup, It is recommended to enable the popper-append-to-body

Or you can use <client-only></client-only> as before.

for example:

<el-table v-loading="loading" :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="Date" width="180" />
  <el-table-column prop="name" label="Name" width="180" />
  <el-table-column prop="address" label="Address" />
</el-table>

will cause this error:

[Vue warn]: Failed to resolve directive: loading
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'getSSRProps')
    at Module.ssrGetDirectiveProps (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:962:42)
    at _sfc_ssrRender (C:/Users/kevin/Documents/.Meine Dokumente/Website Dev/element-plus-nuxt-starter/components/Examples.vue:358:29)
    at renderComponentSubTree (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:254:17)
    at renderComponentVNode (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)
    at Module.ssrRenderComponent (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:612:12)
    at _sfc_ssrRender (C:/Users/kevin/Documents/.Meine Dokumente/Website Dev/element-plus-nuxt-starter/pages/index.vue:17:31)        
    at renderComponentSubTree (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:254:17)
    at renderComponentVNode (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)
    at renderVNode (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:299:22)
    at renderComponentSubTree (C:\Users\kevin\Documents\.Meine Dokumente\Website Dev\element-plus-nuxt-starter\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:263:13)

(but it works without the v-loading="loading" directive)

阅读 Element Plus 文档后的设置：

import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver"

const lifecycle = process.env.npm_lifecycle_event

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  meta: {
    title: 'Element Plus + Nuxt 3',
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ElementPlus + Nuxt3',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  build: {
    transpile: [
      lifecycle === 'build' || lifecycle === 'generate' ? 'element-plus' : '',
      'element-plus/es'
    ],
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        dts: true,
        resolvers: [
          ElementPlusResolver({ ssr: true }), 
          IconsResolver({})
        ],
      }),
    ],
  },
  modules: [
    '@nuxt/content', '@vueuse/nuxt',
  ],
  nitro: {
    plugins: [
      // "~/database/index.ts",
    ]
  },
  css: [
    '~/styles/index.scss'
  ]
})

能正常根据项目需要，生成components.d.ts:

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/lib')['ElButton']
    ElColorPicker: typeof import('element-plus/lib')['ElColorPicker']
    ElDialog: typeof import('element-plus/lib')['ElDialog']
    ElForm: typeof import('element-plus/lib')['ElForm']
    ElFormItem: typeof import('element-plus/lib')['ElFormItem']
    ElIcon: typeof import('element-plus/lib')['ElIcon']
    ElInput: typeof import('element-plus/lib')['ElInput']
    ElOption: typeof import('element-plus/lib')['ElOption']
    ElRadioButton: typeof import('element-plus/lib')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/lib')['ElRadioGroup']
    ElSelect: typeof import('element-plus/lib')['ElSelect']
    ElTextarea: typeof import('element-plus/es')['ElTextarea']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

但是 hot reload 失效了，项目编译正常，需要每次手动点击浏览器的刷新按钮才能更新界面。 谢谢🙏

Environment

Operating System: windows Node Version: v16.15.0 Nuxt Version: 3.0.0-rc.6 Package Manager: [email protected] Builder: Build Modules: "element-plus": "^2.2.10"

Reproduction

nuxt build / nuxt start

Describe the bug

When I use the el-carousel component, the error cannot read properties of null (reading'isCE') will be reported when I package and start the nuxt3 project, But as long as I add the tag, it will work normally

Logs

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injec
tion APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lif
ecycle hooks before the first await statement.
[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle
 injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to regist
er lifecycle hooks before the first await statement.
[Vue warn]: provide() can only be used inside setup().
TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (D:\StudyPlace\Test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.c
js.js:2937:34)
    at Proxy.<anonymous> (file:///D:/StudyPlace/Test/nuxt3-app/.output/server/node_modules/element-plus/es/compon
ents/carousel/src/carousel2.mjs:295:11)
    at renderComponentRoot (file:///D:/StudyPlace/Test/nuxt3-app/.output/server/chunks/renderer.mjs:2961:45)     
    at renderComponentSubTree (file:///D:/StudyPlace/Test/nuxt3-app/.output/server/chunks/renderer.mjs:10597:51) 
    at renderComponentVNode (file:///D:/StudyPlace/Test/nuxt3-app/.output/server/chunks/renderer.mjs:10526:16)   
    at Object.ssrRenderComponent (file:///D:/StudyPlace/Test/nuxt3-app/.output/server/chunks/renderer.mjs:10946:1
2)

My Reproduction Project

https://github.com/kood-2008/nuxt3-carousel/tree/master

Here is a reproduction of the problem. https://stackblitz.com/edit/nuxt-starter-dge1kk?file=app.vue If you hover over one of the menu items and open it under the menu, everything under the menu will open at once

i got this error when clone this repo

what i do 1- clone 2- yarn 3- yarn dev

then i got this error

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Volumes/Data/Projects/board-v3/app/element-plus-nuxt-starter/node_modules/dayjs/plugin/customParseFormat' imported from /Volumes/Data/Projects/board-v3/app/element-plus-nuxt-starter/node_modules/element-plus/es/components/time-select/src/time-select4.mjs
Did you mean to import dayjs/plugin/customParseFormat.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Nuxt project info:

• Operating System: Darwin
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: meta, css, build, typescript, modules, components, vueuse, unocss
• Runtime Modules: @vueuse/[email protected], @unocss/[email protected], @pinia/[email protected]
• Build Modules: -