[youzan/vant]在 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/@vant+cli@4.0.1_sass@1.49.9+vue@3.2.31/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/@vant+cli@4.0.1_sass@1.49.9+vue@3.2.31/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/@rollup+pluginutils@4.2.0/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/@rollup+pluginutils@4.2.0/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/@rollup+pluginutils@4.2.0/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/@rollup+pluginutils@4.2.0/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/@rollup+pluginutils@4.2.0/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/vite-plugin-style-import@2.0.0/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/@rollup+pluginutils@4.2.0/node_modules/@rollup/pluginutils/dist/es/index.js:1:9: ERROR: No matching export in "browser-external:path" for import "extname"
node_modules/.pnpm/@rollup+pluginutils@4.2.0/node_modules/@rollup/pluginutils/dist/es/index.js:1:18: ERROR: No matching export in "browser-external:path" for import "win32"
node_modules/.pnpm/@rollup+pluginutils@4.2.0/node_modules/@rollup/pluginutils/dist/es/index.js:1:25: ERROR: No matching export in "browser-external:path" for import "posix"
node_modules/.pnpm/@rollup+pluginutils@4.2.0/node_modules/@rollup/pluginutils/dist/es/index.js:1:32: ERROR: No matching export in "browser-external:path" for import "isAbsolute"
node_modules/.pnpm/@rollup+pluginutils@4.2.0/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
```

Hioolong

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

HZZformGD

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

Hioolong

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

HZZformGD

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

hidoos

一开始就是安装 1.4.1 版本的，也是会报这个错

Hioolong

确实啊，无限循环报错，只要是在vant.config.mjs引入了vite相关的插件就会这样

17838963114wu

同样碰到报这个错，只要加了插件就无限报错

julytian

目前 vant-cli 需要在文档网站的运行时代码中读取 vant.config.mjs 文件的内容，因此产生了该问题。后续需要把 vite config 从 vant.config.mjs 中独立出来，才能解决该问题

chenjiahan

把vant降级到3.4.9是没有问题的，应该是vant更新了什么

xiaobailong007

已在 @vant/cli 5.1.0 版本支持读取 vite.config.ts 配置文件，在该文件中可以引用 vite 插件。

chenjiahan

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

回答

相关问题