element-plus: [Bug Report] [Component] [tree-select] A wrong import in `tree-select` which can cause compile(build) error.
Bug Type: Component
Environment
- Vue Version:
3.2.31 - Element Plus Version:
2.1.8 - Browser / OS:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36 Edg/100.0.1185.29 - Build Tool:
Vite
Reproduction
Related Component
el-tree-select
Reproduction Link
Steps to reproduce
- Use
vite - Install
unplugin-auto-importandunplugin-vue-components - Configure
vite.config.tsso that you can use 2 plugins normally. - Add
el-tree-selectintoApp.vue - Start vite dev server.
- You will see that building error.
What is Expected?
Could import tree-select successfully without handle it by ourself.
What is actually happening?
It can not import this component this or we will recieve an error:
X [ERROR] Could not resolve "element-plus/theme-chalk/tree-select.css"
node_modules/.pnpm/element-plus@2.1.8_vue@3.2.31/node_modules/element-plus/es/components/tree-select/style/css.mjs:3:7:
3 │ import 'element-plus/theme-chalk/tree-select.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The module "./theme-chalk/tree-select.css" was not found on the file system:
node_modules/.pnpm/element-plus@2.1.8_vue@3.2.31/node_modules/element-plus/package.json:30:11:
30 │ "./*": "./*"
╵ ~~~~~
You can mark the path "element-plus/theme-chalk/tree-select.css" as external to exclude it from
the bundle, which will remove this error.
13:14:37 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/.pnpm/element-plus@2.1.8_vue@3.2.31/node_modules/element-plus/es/components/tree-select/style/css.mjs:3:7: ERROR: Could not resolve "element-plus/theme-chalk/tree-select.css"
at failureErrorWithLog (E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:1601:15)
at E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:1247:28
at runOnEndCallbacks (E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:1032:63)
at buildResponseToResult (E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:1245:7)
at E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:1354:14
at E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:664:9
at handleIncomingPacket (E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:761:9)
at Socket.readFromStdout (E:\stunning-new\node_modules\.pnpm\esbuild@0.14.21\node_modules\esbuild\lib\main.js:631:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:324:12)
Additional comments
It might a error with the bundler of element plus. It is possible that there’s something wrong in the bundler config for tree-select.
Besides, the file imported of node_modules/.pnpm/element-plus@2.1.8_vue@3.2.31/node_modules/element-plus/es/components/tree-select/style/css.mjs:3:7 is element-plus/theme-chalk/src/tree-select/css, but it really not exists. However, I found the current file which is located in element-plus/theme-chalk/el-tree-select.css
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 25 (22 by maintainers)
vite.config.ts