pipinet commented 3 years ago

This function solves the problem (这个功能解决的问题)

Nuxtjs Support

Expected API (期望的 API)

Nuxtjs Support

07akioni commented 3 years ago

Nuxt support is put in official docs now

https://www.naiveui.com/en-US/os-theme/docs/ssr

wenzheng-yi commented 3 years ago

据我所知，Nuxtjs目前是基于vue2的，而vue3驱动的Nuxt3还在开发中，所以，同样基于vue3的naive-ui很难支持当下的Nuxtjs。

As I know, Nuxtjs is based on vue2, and the Nuxt3 powered with vue3 still in heavy development. So, navie-ui that is also based on vue3 is hard to surpport Nuxtjs now.

07akioni commented 3 years ago

据我所知，Nuxtjs目前是基于vue2的，而vue3驱动的Nuxt3还在开发中，所以，同样基于vue3的naive-ui很难支持当下的Nuxtjs。

As I know, Nuxtjs is based on vue2, and the Nuxt3 powered with vue3 still in heavy development. So, navie-ui that is also based on vue3 is hard to surpport Nuxtjs now.

我不熟 NUXT，不过估计主要的难点在于 css-in-js 导致的 SSR 问题，其他没啥道理不 work。

pipinet commented 3 years ago

https://nuxtjs.org/v3

mndaipre commented 3 years ago

https://v3.nuxtjs.org/ is in beta now

07akioni commented 3 years ago

If someone has tried it, please tell us what errors you met.

Actually I've never used nuxt and don't know what's required to make it work.

migueldaipre commented 3 years ago

If someone has tried it, please tell us what errors you met.

Actually I've never used nuxt and don't know what's required to make it work.

I did the default installation steps for nuxt (https://v3.nuxtjs.org/getting-started/installation) and for naive-ui (https://www.naiveui.com/en-US/os- theme/docs/installation) and I'm getting the error "Server Side Rendering Error: Error: Unexpected token 'export'", follow StackBlitz link to help debug https://stackblitz.com/edit/github-ovqtjv?devtoolsheight= 33&file=app.vue. thanks

07akioni commented 3 years ago

That's quite wired since we do provide a cjs build version in node_modules/naive-ui/lib/

oceanlvr commented 3 years ago

I'm interested in getting involved in the job, but I'm new if I can get advice on where to start.

07akioni commented 3 years ago

I'm interested in getting involved in the job, but I'm new if I can get advice on where to start.

Just try to make a button rendered in nuxt. The most possible barrier could be css-render integration. See SSR section in naive-ui's site for more information if you meet the related issues.

pipinet commented 3 years ago

i use nuxtjs v3.0 integrate naive-ui, it looks work. but got some error in console

nuxt.config.ts

import {defineNuxtConfig} from 'nuxt3'

export default defineNuxtConfig({
  alias: {},
  modules: [],
  build: {
    transpile: ['naive-ui', 'seemly', 'css-render', 'emotion', 'vooks', 'evtd', 'date-fns'],
  },
  extensions: [],
  app: {
    basePath: '/',
    assetsPath: '/assets',
    cdnURL: null
  },
  srcDir: 'src',
  ssr: true,
  privateRuntimeConfig: {},
  publicRuntimeConfig: {}
})

plugins

import naive from "naive-ui";

export default defineNuxtPlugin((nuxt) => {
    nuxt.app.use(naive)
})

07akioni commented 3 years ago

There's some errors in ssr so it may fallback to CSR.

pipinet commented 3 years ago

@07akioni it means naive-ui or nuxtjs issue?

07akioni commented 3 years ago

@07akioni it means naive-ui or nuxtjs issue?

Need to do something to make SSR in nuxt work.

wobsoriano commented 3 years ago

To use naive-ui in nuxt 3 you can temporarily turn off vite in your nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    vite: false
})

Dev and build works with this.

pipinet commented 3 years ago

@wobsoriano it's not a good suggestion.

wobsoriano commented 3 years ago

@wobsoriano it's not a good suggestion.

"temporarily"

https://github.com/nuxt/nuxt.js/issues/12050

Adding naive-ui to build.transpile - Doesn't work
Adding naive-ui to vite.ssr.noExternal - Doesn't work
Setting vite: false - Works (Uses webpack 5 instead of vite)

This is also my workaround for nuxt3-supabase https://github.com/wobsoriano/nuxt3-supabase#getting-started

AshenBird commented 3 years ago

@wobsoriano it's not a good suggestion.

"temporarily"

nuxt/nuxt.js#12050 (comment)

Adding naive-ui to build.transpile - Doesn't work

Adding naive-ui to vite.ssr.noExternal - Doesn't work

Setting vite: false - Works (Uses webpack 5 instead of vite)

This is also my workaround for nuxt3-supabase https://github.com/wobsoriano/nuxt3-supabase#getting-started

this is right. nuxt3 replace global with globalThis , but also replace it in path what be uesed import argument. this is nuxt3's matter.

AshenBird commented 3 years ago

i use nuxtjs v3.0 integrate naive-ui, it looks work. but got some error in console

nuxt.config.ts

import {defineNuxtConfig} from 'nuxt3'

export default defineNuxtConfig({
  alias: {},
  modules: [],
  build: {
    transpile: ['naive-ui', 'seemly', 'css-render', 'emotion', 'vooks', 'evtd', 'date-fns'],
  },
  extensions: [],
  app: {
    basePath: '/',
    assetsPath: '/assets',
    cdnURL: null
  },
  srcDir: 'src',
  ssr: true,
  privateRuntimeConfig: {},
  publicRuntimeConfig: {}
})

plugins

import naive from "naive-ui";

export default defineNuxtPlugin((nuxt) => {
    nuxt.app.use(naive)
})

like this , will can not treeshake

wobsoriano commented 3 years ago

@wobsoriano it's not a good suggestion.

"temporarily" nuxt/nuxt.js#12050 (comment)

Adding naive-ui to build.transpile - Doesn't work

Adding naive-ui to vite.ssr.noExternal - Doesn't work

Setting vite: false - Works (Uses webpack 5 instead of vite)

This is also my workaround for nuxt3-supabase https://github.com/wobsoriano/nuxt3-supabase#getting-started

this is right. nuxt3 replace global with globalThis , but also replace it in path what be uesed import argument. this is nuxt3's matter.

Yep, until nuxt3 fixes it, gonna have to use that workaround

AshenBird commented 3 years ago

据我所知，Nuxtjs目前是基于vue2的，而vue3驱动的Nuxt3还在开发中，所以，同样基于vue3的naive-ui很难支持当下的Nuxtjs。 As I know, Nuxtjs is based on vue2, and the Nuxt3 powered with vue3 still in heavy development. So, navie-ui that is also based on vue3 is hard to surpport Nuxtjs now.

我不熟 NUXT，不过估计主要的难点在于 css-in-js 导致的 SSR 问题，其他没啥道理不 work。

确实，主要问题就是这个。nuxt3 的文档缺了很多还，不过很多接口与 nuxt2 类似。主要问题就是需要找个时机讲收集到的样式注入模板，我现在倾向于在渲染后响应客户端之前，对要用来响应的 html 进行注入。或者看下有没有机会渲染前在模板上做手脚。

还有一个目前影响不是很大的问题，就是在 GlobalStyle 模块中，document 的调用没有验证环境，服务端渲染阶段可能会抛出异常。虽然有异常，但是不影响整体运行，我就没去看源码，盲猜是个异步执行，加个验证我觉的会好一点。大概长这样：

[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
Server Side Rendering Error: ReferenceError: document is not defined
    at setup (D:\projects\private\mcswift.me\node_modules\naive-ui\lib\global-style\src\GlobalStyle.js:12:26)
    at callWithErrorHandling (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6599:22)
    at setupStatefulComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6225:29)
    at setupComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6181:11)
    at renderComponentVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:198:17)
    at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:304:22)
    at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
    at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:296:13)
    at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
    at renderElementVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:370:17)

07akioni commented 3 years ago

I've make it work for nuxt 3 now.

set vite: false in nuxt.config.ts


import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({ vite: false })

2. install `@css-render/vue3-ssr`
3. create `naive-ui-plugin.server.ts` in `<nuxt-project-root>/plugins/`
```typescript
import { setup } from "@css-render/vue3-ssr";
import { defineNuxtPlugin } from "#app";

// I'm not sure whether the plugin is called twice in each refreshing
// Maybe it's expected. If you have more information about it, please comment in the issue

export default defineNuxtPlugin((nuxtApp) => {
  const { collect } = setup(nuxtApp.app);
  nuxtApp.ssrContext!.renderMeta = () => {
    return {
      headTags: collect(),
    };
  };
});

Then it should work.

hartmut-co-uk commented 3 years ago

pls note after latest changes (3.0.0-27244261.c49f9ca) nuxtApp.vueApp must be used:

export default defineNuxtPlugin((nuxtApp) => {
  const { collect } = setup(nuxtApp.vueApp);
  ...

hartmut-co-uk commented 3 years ago

build works, but when starting the bundled app it does not seem to work, errors & warnings server-side, frontend is not styled:

yarn build 
yarn start

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: provide() can only be used inside setup().
[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 register lifecycle hooks before the first await statement.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot destructure property 'styles' of 'ssrContext' as it is undefined.
    at Object.ssrAdapter [as adapter] (./.output/server/node_modules/@css-render/vue3-ssr/lib/index.js:15:13)
    at Object.mount (./.output/server/node_modules/css-render/lib/mount.js:58:20)
    at Object.wrappedMount [as mount] (./.output/server/node_modules/css-render/lib/c.js:14:35)
    at mountStyle (./.output/server/node_modules/naive-ui/lib/_mixins/use-theme.js:19:19)
    at useTheme (./.output/server/node_modules/naive-ui/lib/_mixins/use-theme.js:34:13)
    at setup (./.output/server/node_modules/naive-ui/lib/button/src/Button.js:122:49)
    at callWithErrorHandling (file://./.output/server/chunks/index.mjs:7163:22)
    at setupStatefulComponent (file://./.output/server/chunks/index.mjs:6879:29)
    at setupComponent (file://./.output/server/chunks/index.mjs:6860:11)
    at renderComponentVNode (file://./.output/server/chunks/index.mjs:9758:17)

07akioni commented 3 years ago

build works, but when starting the bundled app it does not seem to work, errors & warnings server-side, frontend is not styled:

yarn build 
yarn start

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: provide() can only be used inside setup().
[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 register lifecycle hooks before the first await statement.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot destructure property 'styles' of 'ssrContext' as it is undefined.
    at Object.ssrAdapter [as adapter] (./.output/server/node_modules/@css-render/vue3-ssr/lib/index.js:15:13)
    at Object.mount (./.output/server/node_modules/css-render/lib/mount.js:58:20)
    at Object.wrappedMount [as mount] (./.output/server/node_modules/css-render/lib/c.js:14:35)
    at mountStyle (./.output/server/node_modules/naive-ui/lib/_mixins/use-theme.js:19:19)
    at useTheme (./.output/server/node_modules/naive-ui/lib/_mixins/use-theme.js:34:13)
    at setup (./.output/server/node_modules/naive-ui/lib/button/src/Button.js:122:49)
    at callWithErrorHandling (file://./.output/server/chunks/index.mjs:7163:22)
    at setupStatefulComponent (file://./.output/server/chunks/index.mjs:6879:29)
    at setupComponent (file://./.output/server/chunks/index.mjs:6860:11)
    at renderComponentVNode (file://./.output/server/chunks/index.mjs:9758:17)

I'm not sure what happens. However I think those shouldn't happen. Maybe the token isn't injected to the app.

pipinet commented 3 years ago

@07akioni 这个怎么破？

07akioni commented 3 years ago

@07akioni 这个怎么破？

哪个？这个 issue 里面提供了一个能 work 的方式，虽然看起来不是很完美

pipinet commented 3 years ago

@07akioni https://v3.nuxtjs.org/concepts/esm

jbmolle commented 3 years ago

You could try to use the unbuild package from unjs/unbuild. Add in package.json, devDependencies:

"unbuild": "latest"

And then you need to create a build.config.ts which looks like this:

import { defineBuildConfig, BuildEntry } from 'unbuild'

export default defineBuildConfig({
  declaration: true,
  entries: [
    // CJS
    {
      input: 'src/',
      outDir: 'lib',
       format: 'cjs'
     },
     // ESM
     {
       input: 'src/',
       outDir: 'es'
     },
   ],
 })

The following packages need to be rebuilt: css-render, evtd, naive-ui, seemly, treemate, vdirs, vooks, vueuc Then in each package.json, you'll need to add:

"exports": {
  "import": "./es/index.mjs",
  "require": "./lib/index.js"
}

So far it almost works on my side. I just didn't manage to build the .tsx to .mjs/.js files Also in css-render, subpackages like test-shared only have one file to compile. For test-shared, it's utils.ts. So your build.config.ts would be:

import { defineBuildConfig, BuildEntry } from 'unbuild'

export default defineBuildConfig({
  declaration: true,
  entries: [utils],
 })

And it would automatically create a dist folder with .cjs and .mjs files. So package.json would have:

"exports": {
  "import": "./dist/utils.mjs",
  "require": "./dist/utils.cjs"
}

All the package.json should also have a script to build:

"scripts": {
  "prepack": "unbuild"
}

pipinet commented 3 years ago

element-plus 对nuxt3是支持的。。可以看看两者的区别。。 https://github.com/element-plus/element-plus-nuxt-starter

07akioni commented 3 years ago

element-plus 对nuxt3是支持的。。可以看看两者的区别。。 https://github.com/element-plus/element-plus-nuxt-starter

The problem is mainly about css in js. If I have time I'll figure it out.

AshenBird commented 3 years ago

element-plus 对nuxt3是支持的。。可以看看两者的区别。。 https://github.com/element-plus/element-plus-nuxt-starter

事实上如果你需要一个接受度更高，但是历史负担更重的组件库，element 确实更适合。但我就是因为在公司项目中对 element-plus 的历史负担感到厌烦，才在私人项目中义无反顾的不再使用。尤其是现在 eleement-plus 尚未发布正式版，整体的稳定性依然堪忧，而且其开发团队还有繁重的组件重写的任务。

相比之下，naive-ui 目前遇到的与 nuxt.js 的兼容性问题基本是明确的。虽然从一定意义上讲是作者 @07akioni 为使用其 css in js 而产生的副作用，但是目前来看不是不可解决的。甚至我倾向于现在作者提供的解决办法——通过插件来收集并注入样式，是一个符合nuxt.js 历史上对 SSR 进行兼容的逻辑，可以直接封装之后作为 nuxt.js 插件来发布。包括 element-ui 也是通过这样的方式来在 nuxt.js 2.x 兼容其自定义指令的。

07akioni commented 3 years ago

据我所知，Nuxtjs目前是基于vue2的，而vue3驱动的Nuxt3还在开发中，所以，同样基于vue3的naive-ui很难支持当下的Nuxtjs。 As I know, Nuxtjs is based on vue2, and the Nuxt3 powered with vue3 still in heavy development. So, navie-ui that is also based on vue3 is hard to surpport Nuxtjs now.

我不熟 NUXT，不过估计主要的难点在于 css-in-js 导致的 SSR 问题，其他没啥道理不 work。

确实，主要问题就是这个。nuxt3 的文档缺了很多还，不过很多接口与 nuxt2 类似。主要问题就是需要找个时机讲收集到的样式注入模板，我现在倾向于在渲染后响应客户端之前，对要用来响应的 html 进行注入。或者看下有没有机会渲染前在模板上做手脚。

还有一个目前影响不是很大的问题，就是在 GlobalStyle 模块中，document 的调用没有验证环境，服务端渲染阶段可能会抛出异常。虽然有异常，但是不影响整体运行，我就没去看源码，盲猜是个异步执行，加个验证我觉的会好一点。大概长这样：
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
Server Side Rendering Error: ReferenceError: document is not defined
    at setup (D:\projects\private\mcswift.me\node_modules\naive-ui\lib\global-style\src\GlobalStyle.js:12:26)
    at callWithErrorHandling (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6599:22)
    at setupStatefulComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6225:29)
    at setupComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6181:11)
    at renderComponentVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:198:17)
    at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:304:22)
    at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
    at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:296:13)
    at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
    at renderElementVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:370:17)

这个应该是个 bug，需要修一下 @Talljack

jbmolle commented 3 years ago

Hi, I've just created a pull request to bypass a bug on Vitejs. Actually when we use:

import commonVariables from '../common/_common'
const transition = `all .3s ${commonVariables.cubicBezierEaseInOut} !important`

This does not work with Vitejs which is not replacing commonVariables with vite_ssr_import(xxx) So we need to write:

import commonVariables from '../common/_common'
const { cubicBezierEaseInOut } = commonVariables
const transition = `all .3s ${cubicBezierEaseInOut} !important`

And Vitejs will replace with const { cubicBezierEaseInOut } = vite_ssr_import(xxx)

pipinet commented 2 years ago

@07akioni 我用https://github.com/TuSimple/naive-ui/pull/1611. 这个版本启动正常了，但是在layout组件里使用NConfigProvider的时候 src/global-style/src/GlobalStyle.ts里const { body } = document 这一行在server端有点问题，因为在server端document是不存在的, 错误日志如下：

$ yarn run dev
yarn run v1.22.11
$ nuxi dev
Nuxt CLI v3.0.0-27288761.d3fb512                                                                                               22:48:24
                                                                                                                               22:48:24
  > Local:    http://localhost:3000/
  > Network:  http://192.168.31.91:3000/

ℹ Vite warmed up in 452ms                                                                                                      22:48:25
✔ Vite server built in 13025ms                                                                                                 22:48:38
✔ Nitro built in 138 ms                                                                                                        22:48:38
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
document is not defined
  at setup (file://./.nuxt/dist/server/server.mjs:93348:22)
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderElementVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
(node:63550) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at setup (file:///Users/pipinet/workspace/crp-nuxt-web/.nuxt/dist/server/server.mjs:93348:22)
    at callWithErrorHandling (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
    at setupStatefulComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
    at setupComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
    at renderComponentVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderElementVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:63550) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:63550) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

07akioni commented 2 years ago

@07akioni 我用#1611. 这个版本启动正常了，但是在layout组件里使用NConfigProvider的时候 src/global-style/src/GlobalStyle.ts里const { body } = document 这一行在server端有点问题，因为在server端document是不存在的, 错误日志如下：

$ yarn run dev
yarn run v1.22.11
$ nuxi dev
Nuxt CLI v3.0.0-27288761.d3fb512                                                                                               22:48:24
                                                                                                                               22:48:24
  > Local:    http://localhost:3000/
  > Network:  http://192.168.31.91:3000/

ℹ Vite warmed up in 452ms                                                                                                      22:48:25
✔ Vite server built in 13025ms                                                                                                 22:48:38
✔ Nitro built in 138 ms                                                                                                        22:48:38
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
document is not defined
  at setup (file://./.nuxt/dist/server/server.mjs:93348:22)
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderElementVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
(node:63550) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at setup (file:///Users/pipinet/workspace/crp-nuxt-web/.nuxt/dist/server/server.mjs:93348:22)
    at callWithErrorHandling (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
    at setupStatefulComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
    at setupComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
    at renderComponentVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderElementVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:63550) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:63550) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Okay, I'll fix it.

07akioni commented 2 years ago

fixed in 0114dc023935038eeb5bdc5148a5c8dbb0aa8284

Will be released in next version

pipinet commented 2 years ago

@07akioni 问题还是在。代码在：https://github.com/qwlabs/crp-nuxt-web

Nuxt CLI v3.0.0-27288761.d3fb512                                                                                               01:18:45
                                                                                                                               01:18:46
  > Local:    http://localhost:3000/
  > Network:  http://192.168.31.91:3000/

ℹ Vite warmed up in 561ms                                                                                                      01:18:48
✔ Vite server built in 13461ms                                                                                                 01:19:01
✔ Nitro built in 134 ms                                                                                                        01:19:01
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
document is not defined
  at setup (file://./.nuxt/dist/server/server.mjs:93362:5)
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderElementVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
(node:73126) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at setup (file:///Users/pipinet/workspace/crp-nuxt-web/.nuxt/dist/server/server.mjs:93362:5)
    at callWithErrorHandling (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
    at setupStatefulComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
    at setupComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
    at renderComponentVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderElementVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:73126) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:73126) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

07akioni commented 2 years ago

@07akioni 问题还是在。代码在：https://github.com/qwlabs/crp-nuxt-web

Nuxt CLI v3.0.0-27288761.d3fb512                                                                                               01:18:45
                                                                                                                               01:18:46
  > Local:    http://localhost:3000/
  > Network:  http://192.168.31.91:3000/

ℹ Vite warmed up in 561ms                                                                                                      01:18:48
✔ Vite server built in 13461ms                                                                                                 01:19:01
✔ Nitro built in 134 ms                                                                                                        01:19:01
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
document is not defined
  at setup (file://./.nuxt/dist/server/server.mjs:93362:5)
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
  at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
  at renderElementVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
[Vue warn]: Unhandled error during execution of setup function
  at <GlobalStyle>
(node:73126) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at setup (file:///Users/pipinet/workspace/crp-nuxt-web/.nuxt/dist/server/server.mjs:93362:5)
    at callWithErrorHandling (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6620:22)
    at setupStatefulComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:29)
    at setupComponent (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6202:11)
    at renderComponentVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:296:13)
    at renderVNodeChildren (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:319:9)
    at renderElementVNode (/Users/pipinet/workspace/crp-nuxt-web/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:370:17)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:73126) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:73126) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

修复了，下一个版本才能发...

pipinet commented 2 years ago

@07akioni 我用的就是你修复后的版本。https://github.com/qwlabs/crp-nuxt-web

07akioni commented 2 years ago

document

了解了

AshenBird commented 2 years ago

@07akioni 我用的就是你修复后的版本。https://github.com/qwlabs/crp-nuxt-web

如果你你对服务端渲染的需求主要针对 SEO 而非首屏加载速度的，可以考虑对 global-style 组件只在客户端加载。这样不会抛出错误，但是首屏样式等待加载的问题依然会存在。

07akioni commented 2 years ago

的需求主要针对 SEO 而非首屏加载速度的，可以考虑对 g

nglobalstyle 报错的问题我已经修复了，很快会发布。

这个 nglobalstyle ssr 时候不注入的问题可能要等一段时间才能解决，因为 n-global-style 走的不是 css-render，想把这两个接上还是需要做一些调整

pipinet commented 2 years ago

@07akioni 非常感谢，首屏等待加载问题我们可以暂时通过一些其他办法可以解决。

我刚才用了最新的版本。没有错误了，但是又有一个新的问题。。使用useMessage获取不到。代码我已经提交到https://github.com/qwlabs/crp-nuxt-web 了

const message = useMessage()
message.info(`------`);

07akioni commented 2 years ago

@Talljack 看看

Talljack commented 2 years ago

你useMessage用法有问题 useMessage必须在setup下注册而你在test函数内注册的

Talljack commented 2 years ago

基本上能弹出来但是info的icon丢失了或许我还要再看看

pipinet commented 2 years ago

@Talljack @07akioni 找到nuxt3集成naive-ui的方法了。。这样做是可以work的。样式也是ok的，ssr也是正常的。。但是message貌似有点小问题，message第二次显示显示的时候图标丢了。。

I've find the way to integrate nuxt3 with naive-ui. The following code could work, style is okay and ssr is okay. However there are some problem with message. It would lose icon on is second appearance.

plugins/naive-ui.ts

import {defineNuxtPlugin} from "#app";
import {
  create,
  NButton,
  NConfigProvider,
  NDialogProvider,
  NGlobalStyle,
  NLoadingBarProvider,
  NMessageProvider,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
} from "naive-ui";
import {setup} from "@css-render/vue3-ssr";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const {collect} = setup(nuxtApp.vueApp);
    nuxtApp.ssrContext!.renderMeta = () => {
      return {
        headTags: collect(),
      };
    };
  }
  nuxtApp.vueApp.use(create({
    components: [
      NButton,
      NConfigProvider,
      NGlobalStyle,
      NMessageProvider,
      NDialogProvider,
      NLoadingBarProvider,
      NLayout,
      NLayoutHeader,
      NLayoutContent,
    ]
  }))
});

nuxt.config.ts

import {defineNuxtConfig} from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  srcDir: 'src',
  build: {
    transpile: ["@urql/vue", "naive-ui", "treemate", "seemly", "vueuc", "vdirs"]
  },
  buildModules: [
    'nuxt-windicss',
    '@vueuse/core/nuxt',
    ['@pinia/nuxt', {disableVuex: true}],
  ],
  css: [
    'virtual:windi.css',
  ]
})

07akioni commented 2 years ago

@Talljack @07akioni 找到nuxt3集成naive-ui的方法了。。这样做是可以work的。样式也是ok的，ssr也是正常的。。但是message貌似有点小问题，message第二次显示显示的时候图标丢了。。

plugins/naive-ui.ts

import {defineNuxtPlugin} from "#app";
import {
  create,
  NButton,
  NConfigProvider,
  NDialogProvider,
  NGlobalStyle,
  NLoadingBarProvider,
  NMessageProvider,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
} from "naive-ui";
import {setup} from "@css-render/vue3-ssr";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const {collect} = setup(nuxtApp.vueApp);
    nuxtApp.ssrContext!.renderMeta = () => {
      return {
        headTags: collect(),
      };
    };
  }
  nuxtApp.vueApp.use(create({
    components: [
      NButton,
      NConfigProvider,
      NGlobalStyle,
      NMessageProvider,
      NDialogProvider,
      NLoadingBarProvider,
      NLayout,
      NLayoutHeader,
      NLayoutContent,
    ]
  }))
});

nuxt.config.ts

import {defineNuxtConfig} from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  srcDir: 'src',
  build: {
    transpile: ["@urql/vue", "naive-ui", "treemate", "seemly", "vueuc", "vdirs"]
  },
  buildModules: [
    'nuxt-windicss',
    '@vueuse/core/nuxt',
    ['@pinia/nuxt', {disableVuex: true}],
  ],
  css: [
    'virtual:windi.css',
  ]
})

为啥丢我也很费解，太诡异了，感觉是 hydration 的 bug

07akioni commented 2 years ago

基本上能弹出来但是info的icon丢失了或许我还要再看看

这个有时间的话研究研究，能复现出来的话给 vue 提个 bug

tusen-ai / naive-ui

Nuxtjs Support #636

This function solves the problem (这个功能解决的问题)

Expected API (期望的 API)

Nuxt support is put in official docs now