Wrong wite NuxtJs(3.0.0 RC1)

[TangsWang]

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

各种方式引入nuxtjs(3.0.0 RC1)失败，全局，按需，手动，都报各种错误，导致vite预建模块速度极慢，然后报错，这是手动引入的一个错误： (node:13776) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) D:\NodeJsWS\my-nuxt3-app\node_modules\vueuc\es\shared\finweck-tree.js:4 export class FinweckTree { ^^^^^^

SyntaxError: Unexpected token 'export' at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1032:15) at Module._compile (node:internal/modules/cjs/loader:1067:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at ModuleWrap. (node:internal/modules/esm/translators:168:29) at ModuleJob.run (node:internal/modules/esm/module_job:195:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:337:24)

Expected API (期望的 API)

适配nuxtjs(3.0.0 RC1)的按需引入方式。

[checkblue]

我也是这个问题 怎么配置都是无效的 之前的集中适配方式好像根本不行 我是按照这个方式配置的: https://github.com/TuSimple/naive-ui/issues/636#issuecomment-945990935 一直加载就是不出来

[TangsWang]

@checkblue 不知道是不是nuxtjs3正式版出来后，和之前beta版变化比较大，反正网上各种方式都失败了，现在自己在组件里import都不行，nuxtjs的生态适配估计还要等一段时间。一上nativeui，vite慢的跟蜗牛一样，按道理nuxtjs3是架构在vite基础上的，nativeui的官方vite方式应该能用，无奈无论是加到plugins文件夹里还是nuxt.config-->vite块里，都over，配麻了。暂时放弃了，自己写组件吧/(ㄒoㄒ)/~~

[checkblue]

@TangsWang 我跟你一样这几种方式都尝试了 怎么配置都不行 就差去看源代码- - 我正考虑换一个UI库试试 实在不行我也只能自己写组件了/(ㄒoㄒ)/~~

[TangsWang]

@checkblue 我怀疑是nuxtjs独特的ssr-ssg机制问题，因为它做了universal，我用默认nuxtjs配置的时候提示都是ssr错误，然后我改到了client端解析，vite启动不报错了，但是浏览器各种报错😶，坑太多了。但我现在的项目是个网站式应用，nuxt场景很适合，没办法，之前各种尝试gridsome，gatsby，就差搞next了，希望nuxt生态跟上快一点。

[checkblue]

@TangsWang 我现在的项目其实是要用ssg机制的 之前用过nuxt2但是性能跟不上要求 想换到nuxt3+naiveui试试 我估计等不上了它搞好了 我配几个小插件自己写组件了/(ㄒoㄒ)/~~

[TangsWang]

@checkblue ssg占比很重的话，gastby或者gridsome更轻量一些，它俩都是纯静态配动态捕获来实现sfc接管，性能也更好，nuxt和next都是ssr为主，只是向外拓展到了jamstack，更偏重应用，gridsome和gatsby我都跑了一遍，感觉做cms网站就是神器，gridsome没有gatsby成熟，你的场景，感觉gatsby更合适。

[JWeiZhang]

我目前暫時的解法是使用naive-ui@2.28.1，並將相依套件vueuc版本限制在0.4.29 目前這樣是可以正常使用的，但應該有更正確的解法，看有沒有大神幫忙了

[cinob]

vueuc@0.4.32引入@juggle/resize-observerESM问题导致的

参考nuxt3官方文档ES Modules

在transpile中额外加入@juggle/resize-observer

build: {
   transpile: ['vueuc', 'naive-ui', '@juggle/resize-observer'],
}

[07akioni]

nuxt 这个玩意能不能让人省点心... 崩成这样怎么发正式版

我现在也是一看到 nuxt 的 issue 就头大，写东西写的好好的放在它那里就跑不了

[07akioni]

我看看这个，说不定能找到解决方法 https://nodejs.org/api/packages.html#conditional-exports

[avxkim]

@07akioni hey, does it work with Nuxt 3 RC1?

[07akioni]

build: {
   transpile: ['vueuc', 'naive-ui', '@juggle/resize-observer'],
}

Have you tried this?

build: {
   transpile: ['vueuc', 'naive-ui', '@juggle/resize-observer'],
}

[07akioni]

@07akioni hey, does it work with Nuxt 3 RC1?

It works now.

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