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

javaxiu commented 2 months ago

复现仓库

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

复现步骤

官方脚手架 4.0.5 版本，创建 vite 模板
复制粘贴官方文档的 virtual list 例子 https://docs.taro.zone/docs/virtual-list 代码
执行 npm run dev:weapp
小程序 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 commented 2 months ago

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 commented 2 months ago

我可以提 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 commented 2 months ago

你们怎么跑起来的为啥我一跑就是一堆错误 vue 模板执行安装项目依赖 npm install, 需要一会儿... npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: @tarojs/plugin-framework-vue3@4.0.5 npm error Found: @vitejs/plugin-vue@4.6.2 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/plugin-framework-vue3@4.0.5 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/plugin-vue@5.1.3 npm error node_modules/@vitejs/plugin-vue npm error peerOptional @vitejs/plugin-vue@"^5" from @tarojs/plugin-framework-vue3@4.0.5 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

NervJS / taro