[vite-plugin-imp] element-plus/es/components/link/style/css.js is not found!

[laoyingwei]

[vite-plugin-imp] element-plus/es/components/link/style/css.js is not found!

• Version ^2.3.1

Console warning

[psaren]

Can you provide a mini repo to reproduce this issue in codesandbox or stackblitz?

[bastek338]

@laoyingwei

I'm using ant design and after migrating from v4 into v5 i get similar issue. A reason why i get this error was that @antd authors remove all .less and replaced them with .js files (CSS-in-JS approach), so the problem is simple. Plugin cant find these .js files that should be placed inside path /node-modules/element-plus/es/components/message/style.

So i'm assume that you probably upgrade version of element-plus lib and authors probably change some code inside library you're using.

Hope this helps!

The easiest way to solve this is find the correct path where these files exist after the upgrade.

[zhouccccc]

@laoyingwei

I'm using ant design and after migrating from v4 into v5 i get similar issue. A reason why i get this error was that @antd authors remove all .less and replaced them with .js files (CSS-in-JS approach), so the problem is simple. Plugin cant find these .js files that should be placed inside path /node-modules/element-plus/es/components/message/style.

So i'm assume that you probably upgrade version of element-plus lib and authors probably change some code inside library you're using.

Hope this helps!

The easiest way to solve this is find the correct path where these files exist after the upgrade.

@bastek338 so how do you resolve this with Antd5?

[bastek338]

@bastek338 so how do you resolve this with Antd5?

@zhouccccc in my case this code below works well without any warnings:

vitePluginImp({
    libList: [
        {
            libName: 'antd',
            style: (name) => {
                if (name === 'col' || name === 'row') {
                    return 'antd/lib/style/index.js'
                }
                return `antd/es/${name}/style/index.js`
            },
        },
    ],
})

[zhouccccc]

@bastek338 so how do you resolve this with Antd5?

@zhouccccc in my case this code below works well without any warnings:

vitePluginImp({
    libList: [
        {
            libName: 'antd',
            style: (name) => {
                if (name === 'col' || name === 'row') {
                    return 'antd/lib/style/index.js'
                }
                return `antd/es/${name}/style/index.js`
            },
        },
    ],
})

@bastek338 thanks for you reply. I found this solution is not work for me.
I changed the libList config as you attach and run dev in my local. when I open a page, the browser refresh. this could be strange

Have you ever had this problem?

[w-xuefeng]

[vite-plugin-imp] element-plus/es/components/link/style/css.js is not found!

• Version ^2.3.1

Console warning

fixed at https://github.com/onebay/vite-plugin-imp/pull/95

Alternatively, you can use the following code

vitePluginImp({
  libList: [
    {
      libName: '@formily/element-plus',
      libDirectory: 'esm',
      style(name) {
        return `@formily/element-plus/esm/${name}/style.js`
      },
    },
    {
      libName: 'element-plus',
      libDirectory: 'es/components',
      nameFormatter: (name) => {
        return name.replace('el-', '')
      },
      style: (name) => {
        if (['el-config-provider', 'effect'].includes(name)) return false
        return `element-plus/es/components/${name.replace('el-', '')}/style/css.mjs`
      },
    },
  ],
})