taro4 官方脚手架创建的 vite react 工程，使用虚拟滚动组件报错

[javaxiu]

相关平台

微信小程序

复现仓库

https://github.com/javaxiu/taro_vite_virtual_list.git
小程序基础库: 3.5.7
使用框架: React

复现步骤

1. 官方脚手架 4.0.5 版本，创建 vite 模板
2. 复制粘贴官方文档的 virtual list 例子 https://docs.taro.zone/docs/virtual-list 代码
3. 执行 npm run dev:weapp
4. 小程序 IDE 打开，看到白屏，调试发现 VirtualList 组件为空，源码处是 taro.VirtualList

期望结果

正常执行并渲染出来预期的demo

实际结果

vite 版本有问题，webpack 没有问题

环境信息

Taro CLI 4.0.5 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
      npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 4.0.5 => 4.0.5
      @tarojs/components: 4.0.5 => 4.0.5
      @tarojs/components-advanced: ^4.0.5 => 4.0.5
      @tarojs/helper: 4.0.5 => 4.0.5
      @tarojs/plugin-framework-react: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-alipay: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-h5: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-jd: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-qq: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-swan: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-tt: 4.0.5 => 4.0.5
      @tarojs/plugin-platform-weapp: 4.0.5 => 4.0.5
      @tarojs/react: 4.0.5 => 4.0.5
      @tarojs/runtime: 4.0.5 => 4.0.5
      @tarojs/shared: 4.0.5 => 4.0.5
      @tarojs/taro: 4.0.5 => 4.0.5
      @tarojs/taro-loader: 4.0.5 => 4.0.5
      @tarojs/webpack5-runner: 4.0.5 => 4.0.5
      babel-preset-taro: 4.0.5 => 4.0.5
      eslint-config-taro: 4.0.5 => 4.0.5
      react: ^18.0.0 => 18.3.1

[javaxiu]

vite 的构建产物是 taro.VirtualList，实际上这个组件在 webpack 环境下应该是

    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)((_tarojs_components_advanced_dist_components_virtual_list__WEBPACK_IMPORTED_MODULE_0___default()), {

大概是 vite 配置里的 alias 有问题？

[javaxiu]

我可以提 pr 协助解决问题，但是现在 debug 看了一圈，不知道是哪个插件做的转换，是 transform 还是 load 还是 resolveId，插件太多没有头绪，可以给点提示吗

---

补充：debug 到了 https://github.com/NervJS/taro/blob/main/packages/taro-vite-runner/src/mini/config.ts#L189C1-L190C1 这个位置转成 taro.virtualList 的，而且 dist 产物里没有任何地方把这个 virtualList 打包成代码，vendor common taro 这三个 js 文件内都没有打包，所以改这里也无效

[alaric8]

你们怎么跑起来的 为啥我一跑就是 一堆错误 vue 模板 执行安装项目依赖 npm install, 需要一会儿...
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @tarojs/[email protected]
npm error Found: @vitejs/[email protected]
npm error node_modules/@vitejs/plugin-vue
npm error dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional @vitejs/plugin-vue@"^5" from @tarojs/[email protected]
npm error node_modules/@tarojs/plugin-framework-vue3
npm error @tarojs/plugin-framework-vue3@"4.0.5" from the root project
npm error
npm error Conflicting peer dependency: @vitejs/[email protected]
npm error node_modules/@vitejs/plugin-vue
npm error peerOptional @vitejs/plugin-vue@"^5" from @tarojs/[email protected]
npm error node_modules/@tarojs/plugin-framework-vue3
npm error @tarojs/plugin-framework-vue3@"4.0.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /root/.npm/_logs/2024-09-14T02_23_12_669Z-eresolve-report.txt
npm error A complete log of this run can be found in: /root/.npm/_logs/2024-09-14T02_23_12_669Z-debug-0.log