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

Github Repo

Steps to reproduce

  1. Use vite
  2. Install unplugin-auto-import and unplugin-vue-components
  3. Configure vite.config.ts so that you can use 2 plugins normally.
  4. Add el-tree-select into App.vue
  5. Start vite dev server.
  6. 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)

Most upvoted comments

vite.config.ts


    Components({
      dts: true,
    })