search

element-plus / element-plus-nuxt-starter

🌰 A starter example for element-plus with Nuxt 3.
https://element-plus-nuxt.vercel.app
MIT License
297 stars 82 forks source link

Nuxt3 Element-Plus server rendering error #16

Closed Cabbages closed 2 years ago

Cabbages commented 2 years ago

Environment

Reproduction

git clone https://github.com/element-plus/element-plus-nuxt-starter.git
cd element-plus-nuxt-starter
pnpm install
pnpm run build
pnpm run start

Chrome address bar input：http://localhost:3000

  1. touch pages/index.vue:

    <template>
<div class="page-index">
<Logos />
<Examples />
<el-menu>
  <el-sub-menu></el-sub-menu>
</el-menu>
</div>
</template>

  2. remove the file plugins/element-plus.ts

  3. touch nuxt.config.ts: (need unplugin-vue-components)

    
import { defineNuxtConfig } from "nuxt3";
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { join } from "path";

export default defineNuxtConfig({ meta: { title: "ElementPlus + Nuxt3", }, css: ["assets/scss/index.scss"], components: [ "~/components", { // Because '@nuxt/Components' does not support 'vue.use(ElButton)' mode
// So it's only equivalent to 'auto-imports' path: join(__dirname, "node_modules/element-plus/lib/components"), pattern: ["*/index.js"], prefix: "el", }, ], vite: { plugins: [ Components({ resolvers: [ElementPlusResolver({ ssr: true, })], }), ] } });


# Describe the bug
1、`el-sub-menu`，On demand, `el-sub-menu.css` should be available, but `el-submenu.css` is available instead .  file path: `node_modules/element-plus/theme-chalk/el-submenu.css`.

2、The Node console：

```js
TypeError: Cannot read properties of null (reading 'proxy')
    at Object.useGlobalConfig (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\utils\util.js:117:24)
    at Object.useFormItem (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\hooks\use-form-item\index.js:23:25)
    at setup (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\components\button\src\button.vue_vue_type_script_lang.js:49:17)
    at callWithErrorHandling (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:7159:22)
    at setupStatefulComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6875:29)
    at setupComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6856:11)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9765:17)
    at Object.ssrRenderComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:10190:12)
    at _sfc_ssrRender$1 (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/server.mjs:4955:32)
    at renderComponentSubTree (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9830:13)
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
TypeError: Cannot read properties of null (reading 'isCE')
    at Object.renderSlot (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+@vue+runtime-core@3.2.23\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:5771:34)
    at Proxy.render (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\components\button\src\button.vue_vue_type_template_id_802c5c76_lang.js:49:11)
    at renderComponentRoot (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:2015:44)
    at renderComponentSubTree (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9836:51)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9781:16)
    at Object.ssrRenderComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:10190:12)
    at _sfc_ssrRender$1 (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/server.mjs:4955:32)
    at renderComponentSubTree (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9830:13)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9781:16)
    at Object.ssrRenderComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:10190:12)
TypeError: Cannot read properties of null (reading 'proxy')
    at Object.useGlobalConfig (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\utils\util.js:117:24)
    at Object.useFormItem (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\hooks\use-form-item\index.js:23:25)
    at setup (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\components\input-number\src\input-number.vue_vue_type_script_lang.js:54:78)
    at callWithErrorHandling (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:7159:22)
    at setupStatefulComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6875:29)
    at setupComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6856:11)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9765:17)
    at Object.ssrRenderComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:10190:12)
    at file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/server.mjs:4930:36
    at renderComponentSubTree (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9830:13)
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: resolveDirective can only be used in render() or setup().
[Vue warn]: withDirectives can only be used inside render functions.
[Vue warn]: withDirectives can only be used inside render functions.
TypeError: Cannot read properties of null (reading 'appContext')
    at setup (D:\01-projects\06-nuxt\element-plus-nuxt-starter-main\node_modules\.pnpm\registry.npmmirror.com+element-plus@1.2.0-beta.5\node_modules\element-plus\lib\components\menu\src\menu.js:65:29)
    at callWithErrorHandling (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:7159:22)
    at setupStatefulComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6875:29)
    at setupComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:6856:11)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9765:17)
    at Object.ssrRenderComponent (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:10190:12)
    at _sfc_ssrRender (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/server.mjs:4992:32)
    at renderComponentSubTree (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9830:13)
    at renderComponentVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9781:16)
    at renderVNode (file:///D:/01-projects/06-nuxt/element-plus-nuxt-starter-main/.output/server/chunks/index.mjs:9871:22)
[Vue warn]: Component ElMenu  is missing template or render function

Additional context

No response

Logs

No response

xiaoxian521 commented 2 years ago

looks normal

image