Vitepress 引入 naive-ui build报错

[sky124380729]

TuSimple/naive-ui version (版本)

2.34.2

Vue version (Vue 版本)

3.2.45

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

chrome latest

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

win19

Node version (Node 版本)

Reappearance link (重现链接)

vuejs/vitepress#1399

Reappearance steps (重现步骤)

1. 使用vitepress构建项目
2. 引入naive-ui
3. 执行build打包

Expected results (期望的结果)

能够正常打包

Actual results (实际的结果)

打包报错

Remarks (补充说明)

vuejs/vitepress#1399

#vuejs/vitepress#1399

[jahnli]

docs/.vitepress/theme/index.js
尝试

import DefaultTheme from "vitepress/theme";
import { install } from "naive-ui";

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    DefaultTheme.enhanceApp({ app });
    install(app);
  }
};

[sky124380729]

docs/.vitepress/theme/index.js 尝试

import DefaultTheme from "vitepress/theme";
import { install } from "naive-ui";

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    DefaultTheme.enhanceApp({ app });
    install(app);
  }
};

这样是可以的，但是就不能按需导入了吧

[jahnli]

好像是的，目前还找到按需引入的方案，如果有的话通知下

[sky124380729]

好像是的，目前还找到按需引入的方案，如果有的话通知下

好的，目前已经能解决我的需求，非常感谢，后续找到方案会艾特你

[canyuegongzi]

有解决了吗？

[canyuegongzi]

好像是的，目前还找到按需引入的方案，如果有的话通知下

知道了， es 模式的产物文件必须要以mjs 为扩展

[sky124380729]

好像是的，目前还找到按需引入的方案，如果有的话通知下

知道了， es 模式的产物文件必须要以mjs 为扩展

有找到合适的方案吗，全量导入build的时候也是不行的现在

[windsonR]

可以在vue文件中这样子用

const NDropdown = defineClientComponent(() => {
  return import('naive-ui/es/dropdown').then(d => d.NDropdown)
})

用defineClientComponent包装一层.
vitepress文档

[canyuegongzi]

好像是的，目前还找到按需引入的方案，如果有的话通知下

知道了， es 模式的产物文件必须要以mjs 为扩展

有找到合适的方案吗，全量导入build的时候也是不行的现在

自己clone 一份源码重新构建一下，把构建产物的文件的后缀名修改下，或者修改喜爱node_modules中的文件后缀

[sky124380729]

可以在vue文件中这样子用

const NDropdown = defineClientComponent(() => {
  return import('naive-ui/es/dropdown').then(d => d.NDropdown)
})

用defineClientComponent包装一层. vitepress文档

这个应该是vitepress新特性，晚点我试一下

[meilZhu]

You can do this：
Modify the dependency method you need to introduce to this：
import * as pkg from '....'
const { *** } = pkg

[sky124380729]

You can do this： Modify the dependency method you need to introduce to this： import * as pkg from '....' const { *** } = pkg

have you tried? i tried this way last year, but it did not work as well...

[meilZhu]

yes, i have tried

[edgexie]

You can do this： Modify the dependency method you need to introduce to this： import * as pkg from '....' const { *** } = pkg

yes, it is. But not elegant enough

[lnzhangsong]

话说这么长时间了还没有解决吗？
现在有个临时方案就是 .vitepress/config.mts 文件中 添加如下代码

vite: {
    ssr: {
      noExternal: ["naive-ui"],
    },
  },

[edgexie]

话说这么长时间了还没有解决吗？

现在有个临时方案就是 .vitepress/config.mts 文件中 添加如下代码

vite: {

    ssr: {

      noExternal: ["naive-ui"],

    },

  },

这样就让naiveui 不参与ssr了吧？我觉得这个问题是因为naiveui没有完全按照es模块的规范做。

[hyp530]

话说这么长时间了还没有解决吗？
现在有个临时方案就是 .vitepress/config.mts 文件中 添加如下代码

vite: {

    ssr: {

      noExternal: ["naive-ui"],

    },

  },

这样就让naiveui 不参与ssr了吧？我觉得这个问题是因为naiveui没有完全按照es模块的规范做。

这个并不能彻底解决naiveui的引入问题。我用了，但像还是编译不出来:#5741

[lnzhangsong]

话说这么长时间了还没有解决吗？
现在有个临时方案就是 .vitepress/config.mts 文件中 添加如下代码

vite: {

    ssr: {

      noExternal: ["naive-ui"],

    },

  },

这样就让naiveui 不参与ssr了吧？我觉得这个问题是因为naiveui没有完全按照es模块的规范做。

这个并不能彻底解决naiveui的引入问题。我用了，但像还是编译不出来:#5741

我看了一下你的源码，我说的文件是 .vitepress/config.mts 而不是 .vitepress/vite 配置文件，此外官方文档中只有描述在 config.mts 中配置 vite，没有说在其他文件中做处理 文档地址

[jahnli]

https://github.com/becem-gharbi/nuxt-Naiveui 看看是否可以解决 SSR

[lnzhangsong]

话说这么长时间了还没有解决吗？
现在有个临时方案就是 .vitepress/config.mts 文件中 添加如下代码

vite: {

    ssr: {

      noExternal: ["naive-ui"],

    },

  },

这样就让naiveui 不参与ssr了吧？我觉得这个问题是因为naiveui没有完全按照es模块的规范做。

这个我看别人的描述是因为 生成的产物存在问题，不能参与 ssr，具体参考已解决 Vite SSR 生产构建报错

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

[07akioni]

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