Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
javaxiu opened this issue Sep 13, 2024 · 3 comments
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-4 Version - 4.x

Comments

@javaxiu
Copy link

javaxiu commented Sep 13, 2024

相关平台

微信小程序

复现仓库

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
Copy link
Author

javaxiu commented Sep 13, 2024

image
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 有问题?

@TheKonka TheKonka added F-react Framework - React T-weapp Target - 编译到微信小程序 V-4 Version - 4.x labels Sep 13, 2024
@javaxiu
Copy link
Author

javaxiu commented Sep 14, 2024

我可以提 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
Copy link

alaric8 commented Sep 14, 2024

你们怎么跑起来的 为啥我一跑就是 一堆错误 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

This was referenced Sep 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-4 Version - 4.x
Projects
Status: Todo
Development

No branches or pull requests

3 participants