vite-ts原nutui3升级4 指南中NutUIResolver无法支持报错

[986823307]

NutUI scenes（nutui 场景）

H5（@nutui/nutui）

NutUI-vue version（nutui-vue 版本）

4.0.2

Vue version（vue 版本）

3.2.47

Operating environment（运行环境）

dev:h5

Citation method（引用方式）

npm

Node version（node 版本）

16.18.0

Browser and its version（浏览器及其版本）

Microsoft Edge 版本 111.0.1661.27 (正式版本) dev (64 位)

System and its version（系统及其版本）

Windows 11 专业版 22H2

Reproduction link（重现链接）

github.com

Steps to reproduce（重现步骤）

升级最新版即重现

What is expected?（期望的结果是什么？）

能够正常打包和使用

What is actually happening?（实际的结果是什么？）

能够正常打包和使用

Remarks（补充说明）

vite.config.ts:
import NutUIResolver from "@nutui/nutui/dist/resolver";
// 组件 图标自动导入
Components({
resolvers: [VantResolver(), IconsResolver(), NaiveUiResolver(), NutUIResolver()]
}),
vite build后控制台报错
Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules@nutui\nutui\dist\resolver\index.mjs not supported.
Instead change the require of node_modules@nutui\nutui\dist\resolver\index.mjs to a dynamic import() which is available in all CommonJS modules.
at Object. (vite.config.ts:74:32)
vite、vue等版本与demo一致
但是没有使用demo中的
const NutUIResolver = () => {
return (name) => {
if (name.startsWith("Nut")) {
const partialName = name.slice(3);
return {
name: partialName,
from: "@nutui/nutui",
sideEffects: @nutui/nutui/dist/packages/${partialName.toLowerCase()}/style,
};
}
};
};

还有你们这个最新版本的icon不能向下兼容吗？我更新后需要全部手动替换
import {showToast} from '@nutui/nutui';无法自动引入样式，有需要的页面必须引入@nutui/nutui/dist/packages/toast/style才能正常弹出，这也是个问题

[eiinu]

复现仓库 404

[986823307]

复现仓库 404

可以了 刚才用的是私有

[eiinu]

临时解决方案：
直接指定到对应的 commonjs 文件：import NutUIResolver from "@nutui/nutui/dist/resolver/index.js";
原因：
1、项目中没有设置 type: "module"（vite4 项目的默认配置），vite-config.ts 文件中的 import 语句会被转成 require 方法，导致引入错误。因为项目中含有其他预处理插件，所以不建议此时增加这一配置。
2、NutUI 包中的 Resolver 文件夹内缺少显式指定模块化入口的文件，下个版本会加上。
相关 issue：vitejs/vite#4455

[986823307]

好的 谢谢

[eiinu]

Icon：
4.0 组件内所有的 Icon 都替换为了按需引入的方式，所有图标抽离到单独的包中。
Toast：
函数式组件不含有标签写法，插件无法识别到，需要手动引入组件和样式，建议在全局入口处引入。正在测试使用 unplugin-auto-import 插件自动引入函数式组件的方式。

建议先看下这个，有一些破坏性变更，先评估下是否可以升级 V3->V4升级指南

[986823307]

Icon： 4.0 组件内所有的 Icon 都替换为了按需引入的方式，所有图标抽离到单独的包中。 Toast： 函数式组件不含有标签写法，插件无法识别到，需要手动引入组件和样式，建议在全局入口处引入。正在测试使用 unplugin-auto-import 插件自动引入函数式组件的方式。

建议先看下这个，有一些破坏性变更，先评估下是否可以升级 V3->V4升级指南

好的 谢谢