vite4使用auto-import-resolver按需引入任一组件报错

[beautycss]

NutUI 包名

@nutui/nutui

NutUI 版本号

4.2.7

平台

h5

重现链接

https://codesandbox.io/s/nutui4-vite-demo-forked-8x7xdr?file=/vite.config.ts

重现步骤

1. 本地基于vite4+vue3的h5新项目，运行正常，页面展示正常；
2. 安装4.2.7版本的nutui；
3. 在页面加了一个按钮，<nut-button>按钮</nut-button>；
4. 安装unplugin-vue-components/vite和@nutui/auto-import-resolver；
5. 按照官网文档，css按需引入nutui报错。

import Components from 'unplugin-vue-components/vite'
import NutUIResolver from '@nutui/auto-import-resolver'

...
Components({
  resolvers: [
    NutuiResolve()
  ]
}),
...

6. 加上importStyle: 'sass'，sass按需引入也报错。

...
Components({
  resolvers: [
    NutUIResolver({
      importStyle: 'sass'
    })
  ]
}),
...

期望的结果是什么？

任一组件正常引入，页面能正常显示

实际的结果是什么？

css方式引入报错：

NutUIResolver()

sass方式引入也报错：

NutUIResolver({
  importStyle: 'sass'
})

环境信息

System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
Browsers:
Chrome: 120.0.6099.216
Safari: 17.2.1
npmPackages:
@nutui/nutui: ^4.2.7 => 4.2.7

windows和mac多台电脑，nodejs版本18都是同样的问题。

其他补充信息

其他信息：

• nodejs: 18.19.0;
• Vue: 3.3.13；
• NutUI: 4.2.7;
• Vite: 4.5.1;
• "@nutui/auto-import-resolver": "^1.0.0";
• "unplugin-vue-components": "^0.25.2";

解决方法：

直接修改本地的@nutui/auto-import-resolver/dist/index.js文件第11行后，sass按需引入成功，改动如下：

if (importStyle === "sass") {
    - style = `${packageName}/dist/packages/${componentName.toLowerCase()}/style`;
    + style = `${packageName}/dist/packages/${componentName.toLowerCase()}/index.scss`;
  }

[eiinu]

运行重现链接中的项目，未复现问题。

[beautycss]

运行重现链接中的项目，未复现问题。

[eiinu]

运行重现链接中的项目，未复现问题。

图上的错误是因为项目中没有安装 unplugin-vue-components 插件，与 issue 反馈的内容没有关系。

[beautycss]

1. vite4就是碰到这个问题，多个电脑上碰到过了。
2. 给的demo是vite5，版本不一样。

[eiinu]

1. vite4就是碰到这个问题，多个电脑上碰到过了。
2. 给的demo是vite5，版本不一样。

建议提供能复现的依赖版本都正确的 demo

[beautycss]

运行重现链接中的项目，未复现问题。

这是没安装 unplugin-vue-components 插件的报错。

1. codebox里没有unplugin-vue-components/vite这个包，选的一个其他的。
2. vite4就是碰到这个问题，多个电脑上碰到过了。
3. 给的demo是vite5，版本不一样。
4. 我是本着负责的态度提出来，本来之前评论了，又费了不少时间重新提交了issue。基于问题1，需要本地复现，其实问题也很简单，如果仅凭在线链接来判定，那不如直接关闭好了，我就当给其他碰到同样问题的人一个解决方法。

[eiinu]

运行重现链接中的项目，未复现问题。

这是没安装 unplugin-vue-components 插件的报错。

1. codebox里没有unplugin-vue-components/vite这个包，选的一个其他的。
2. vite4就是碰到这个问题，多个电脑上碰到过了。
3. 给的demo是vite5，版本不一样。
4. 我是本着负责的态度提出来，本来之前评论了，又费了不少时间重新提交了issue。基于问题1，需要本地复现，其实问题也很简单，如果仅凭在线链接来判定，那不如直接关闭好了，我就当给其他碰到同样问题的人一个解决方法。

1、这个插件的包名为 unplugin-vue-components，unplugin-vue-component/vite 只是该包的一个子模块。
2、提供最小可复现的作用，可以参考这里： vuejs/core。
3、在线链接并不是唯一的依据，在另一个 issue 里已回复过，在本地测试过 vite4 版本，没有复现问题。

不同项目里的配置可能是天差地别的，yarn/npm/pnpm、js/ts、vite/vue/unplugin 版本不同都会影响，甚至可能是 tsconfig 或者 vite 的哪个配置项出了问题。提供可复现的环境能直接避开这些差异，更快的解决问题。