vant [Bug Report] 在 vant.config.mjs 导入 vite-plugin-style-import 会报错

重现链接

暂无

Vant Cli 版本

4.0.1

描述一下你遇到的问题。

在 Vant Cli 里引入 Vant 后，需要配置 vite-plugin-style-import 来处理按需引入的样式问题，但是引入了之后，终端报了以下错误

Pre-bundling dependencies:                                                                                                                        17:35:12
  vue
  @vant/touch-emulator
  vue-router
  @docsearch/js
(this will be run only when your dependencies or config have changed)                                                                             17:35:12
                                                                                                                                                  17:35:12
  vite v2.8.6 dev server running at:

  > Local:    http://localhost:3000/                                                                                                              17:35:12
  > Network:  http://10.98.165.39:3000/                                                                                                           17:35:12
下午5:35:14 [vite] new dependencies found: vite-plugin-style-import, updating...                                                                  17:35:14

 WARN  下午5:35:14 [vite] Failed to load source map for /@fs/Users/ronneyhuang/Wesure/H5/组件库/webapp-biz-component/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vant/cli/node_modules/.vite/chunk-RSJERJUL.js?v=e104f1e1.


 WARN  下午5:35:14 [vite] Failed to load source map for /@fs/Users/ronneyhuang/Wesure/H5/组件库/webapp-biz-component/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vant/cli/node_modules/.vite/chunk-5FBSPP2L.js?v=e104f1e1.

✘ [ERROR] No matching export in "browser-external:path" for import "extname"

    node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:9:
      1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
        ╵          ~~~~~~~

✘ [ERROR] No matching export in "browser-external:path" for import "win32"

    node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:18:
      1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
        ╵                   ~~~~~

✘ [ERROR] No matching export in "browser-external:path" for import "posix"

    node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:25:
      1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
        ╵                          ~~~~~

✘ [ERROR] No matching export in "browser-external:path" for import "isAbsolute"

    node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:32:
      1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
        ╵                                 ~~~~~~~~~~

✘ [ERROR] No matching export in "browser-external:path" for import "resolve"

    node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:44:
      1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
        ╵                                             ~~~~~~~

✘ [ERROR] No matching export in "browser-external:module" for import "createRequire"

    node_modules/.pnpm/[email protected]/node_modules/vite-plugin-style-import/dist/index.mjs:9:9:
      9 │ import { createRequire } from 'module';
        ╵          ~~~~~~~~~~~~~


 ERROR  下午5:35:15 [vite] error while updating dependencies:                                                                                     17:35:15
Error: Build failed with 6 errors:
node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:9: ERROR: No matching export in "browser-external:path" for import "extname"
node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:18: ERROR: No matching export in "browser-external:path" for import "win32"
node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:25: ERROR: No matching export in "browser-external:path" for import "posix"
node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:32: ERROR: No matching export in "browser-external:path" for import "isAbsolute"
node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:44: ERROR: No matching export in "browser-external:path" for import "resolve"

重现步骤

vant.config.mjs 导入 vite-plugin-style-import

import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'

修改 configureVite

 configureVite(config) {
   const { BUILD_TARGET } = process.env
   if (BUILD_TARGET === 'site') {
     config.plugins.splice(
       4,
       0,
       createStyleImportPlugin({
         resolves: [VantResolve()],
       })
     )
   }
   return config
 }

运行本地开发服务器
```
pnpm run dev
```

Apr 12 '22 09:04 Hioolong

解决了吗。我这边也有一个类似的问题，我想配置一下 isCustomElement，但是这个是在默认vite 配置里面就有的了，可是没办法代替他，在外面引用 import vue from '@vitejs/plugin-vue' 就会报错

Apr 14 '22 01:04 HZZformGD

解决了吗。我这边也有一个类似的问题，我想配置一下 isCustomElement，但是这个是在默认vite 配置里面就有的了，可是没办法代替他，在外面引用 import vue from '@vitejs/plugin-vue' 就会报错

还没有呢，我暂时通过导入组件样式解决问题了，但也不是长远之计，感觉跟 vite 加载依赖有关系，我去翻翻 vite 的 issue 看看有木有线索

Apr 14 '22 02:04 Hioolong

解决了吗。我这边也有一个类似的问题，我想配置一下 isCustomElement，但是这个是在默认vite 配置里面就有的了，可是没办法代替他，在外面引用 import vue from '@vitejs/plugin-vue' 就会报错

还没有呢，我暂时通过导入组件样式解决问题了，但也不是长远之计，感觉跟 vite 加载依赖有关系，我去翻翻 vite 的 issue 看看有木有线索

尴尬，才发现我改用了varlet的cli，不过vant-cli 一样也有这个问题，看看 vant-cli 的开发组能不能暴露一个覆盖默认插件的接口了

Apr 14 '22 02:04 HZZformGD

先把 vite-plugin-style-import 切换成 1.4.1 版本吧，2.0.0 版本是会报这个错的。