Build error when using vite-ssg/使用vite-ssg进行构建时出错

[censujiang]

TuSimple/naive-ui version (版本)

2.34.2

Vue version (Vue 版本)

3.2.45

Browser and its version (浏览器及其版本)

Chrome 108

System and its version (系统及其版本)

Windows 10

Node version (Node 版本)

16

Reappearance link (重现链接)

https://stackblitz.com/edit/github-2sappy

Reappearance steps (重现步骤)

Introduce any component that exists in navie-ui, and then execute npm run build 将任意navie-ui中的组件引入，然后执行npm run build

Expected results (期望的结果)

Able to build the site normally 能够正常构建站点

Actual results (实际的结果)

build error 构建出错

Remarks (补充说明)

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///D:/git/xxx/xxx/.vite-ssg-temp/main.mjs:14
import { useMessage, NModal, NCard, NMessageProvider } from "naive-ui";
                             ^^^^^
SyntaxError: Named export 'NCard' not found. The requested module 'naive-ui' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'naive-ui';
const { useMessage, NModal, NCard, NMessageProvider } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async build (file:///D:/git/xxx/xxx/node_modules/vite-ssg/dist/shared/vite-ssg.62550b28.mjs:996:87)
    at async Object.handler (file:///D:/git/xxx/xxx/node_modules/vite-ssg/dist/node/cli.mjs:29:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[censujiang]

I need your help @amadeus711 @07akioni @JiwenBai

[07akioni]

这个问题比较复杂，不太好处理，现在 naive 的包里面还有 cjs 的产物，很难搞出来一个 cjs 和 esm 同时兼容各种打包工具的包

[censujiang]

这个问题比较复杂，不太好处理，现在 naive 的包里面还有 cjs 的产物，很难搞出来一个 cjs 和 esm 同时兼容各种打包工具的包

意思是这个坑其实从很早之前就已经埋下了对吧

[crixx]

Hi there

I've pretty much the same issue. Not sure if this is a issue with vite-ssg or naive-ui though. I want to use naive-ui in Vuepress 2. Any ideas?

btw: here probably related questions in the vite-ssg repo: https://github.com/antfu/vite-ssg/issues/166, https://github.com/antfu/vite-ssg/issues/266, https://github.com/antfu/vite-ssg/issues/324

[yongqianvip]

我使用vitepress遇到了类似的问题，使用vitepress打包时，由于naive-ui属于CommonJS，打包失败，请问有没有解决方案 @07akioni

"naive-ui": "^2.33.3"
"vitepress": "1.0.0-alpha.45"

import { NModal } from "naive-ui";
         ^^^^^^
SyntaxError: Named export 'NModal' not found. The requested module 'naive-ui' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'naive-ui';
const { NModal } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
✖ rendering pages...
build error:

 ELIFECYCLE  Command failed with exit code 1.

[CodeMonkey666]

这个问题比较复杂，不太好处理，现在 naive 的包里面还有 cjs 的产物，很难搞出来一个 cjs 和 esm 同时兼容各种打包工具的包

所以结论是暂时不支持使用vite-ssg或者vitepress？ @07akioni

[sky124380729]

mark一下，目前迫切期待能resolve这个问题，很喜欢naive-ui，但是如果上不了vitepress，可能只能放弃了

[Eacolt]

服务端生成ssg静态网站，naiveUI这个组件在网页源代码中不见了，SEO无法搜到内容，该怎么解决啊

[AKanig]

I have the same Problem using Nuxt3 in SSR Mode (production build).

import { NSpace, NSelect } from 'naive-ui';
                 ^^^^^^^
SyntaxError: Named export 'NSelect' not found. The requested module 'naive-ui' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'naive-ui';
const { NSpace, NSelect } = pkg;

Nuxt Version: 3.7.3 naive-ui Version: 2.34.4

[hyp530]

这个问题比较复杂，不太好处理，现在 naive 的包里面还有 cjs 的产物，很难搞出来一个 cjs 和 esm 同时兼容各种打包工具的包

所以结论是暂时不支持使用vite-ssg或者vitepress？ @07akioni

请问这个有什么update吗？我用vitepress + naive-ui好像还是在vite build时出现问题。 @07akioni

[thethreedays]

我也遇到了，现在有办法解决吗？或者有办法转换吗？

[cjboy76]

Same issue here with Nuxt 3

[Cyenoch]

vite.config.ts 中追加:

export default defineConfig({
  ssr: {
    // 原有配置上追加这三个
    noExternal: ['naive-ui', 'date-fns', 'vueuc'],
  }
})

Append configuration items in the configuration file vite.config.ts :

export default defineConfig({
  ssr: {
    // Add these three values ​​to the original configuration.
    noExternal: ['naive-ui', 'date-fns', 'vueuc'],
  }
})

[Cyenoch]

vite.config.ts 中追加:

export default defineConfig({
  ssr: {
    // 原有配置上追加这三个
    noExternal: ['naive-ui', 'date-fns', 'vueuc'],
  }
})

Append configuration items in the configuration file vite.config.ts :

export default defineConfig({
  ssr: {
    // Add these three values ​​to the original configuration.
    noExternal: ['naive-ui', 'date-fns', 'vueuc'],
  }
})

当出现类似 The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports. 报错的时候，可以尝试如上方式操作，但不是长久之计

When something like "The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports." in the error message, you can try to follow the above method, but it is not a long-term solution.

[nekorrrr]

@07akioni

I'm having a similar problem, is there a current solution?

[07akioni]

@yongqianvip @CodeMonkey666 @sky124380729 @hyp530 Vitepress 的 demo： https://github.com/07akioni/naive-ui-vitepress-demo

[nekorrrr]

@yongqianvip @CodeMonkey666 @sky124380729 @hyp530 Vitepress 的 demo： https://github.com/07akioni/naive-ui-vitepress-demo

可以出一个vitessg的demo么？

[07akioni]

补充了 vite-ssg 配置方式 https://www.naiveui.com/zh-CN/os-theme/docs/vite-ssge 补充了 nuxt 配置方式 https://www.naiveui.com/zh-CN/os-theme/docs/nuxtjs