升级taro3.5后编译H5错误信息

zhouzyc commented 2 years ago

复现仓库

https://gitee.com/JS-VeryHappy/vh-mobile-demo 浏览器版本: Chrome 使用框架: React

复现步骤

yarn dev:h5

期望结果

正常启动

实际结果

1.编译时提示 postcss cssModules 未安装忽略； 2.启动后页面报错： Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-OZVEFK23_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-TERMVMJC_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-TERMVMJC_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_tarojs_taro_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_tarojs_taro_js.undefined.js:1:1) node_modules_taro_h5_prebundle_sync_recursive-_43132.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at node_modules_taro_h5_prebundle_sync_recursive-_43132.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-CPFBKUKM_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-CPFBKUKM_js.undefined.js:1:1) node_modules_taro_h5_prebundle_tarojs_router_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at node_modules_taro_h5_prebundle_tarojs_router_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-RYVSBNCH_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-RYVSBNCH_js.undefined.js:1:1) node_modules_taro_h5_prebundle_react_js-node_modules_taro_h5_prebundle_sync_recursive.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at node_modules_taro_h5_prebundle_react_js-node_modules_taro_h5_prebundle_sync_recursive.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-JAXWQEGA_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-JAXWQEGA_js.undefined.js:1:1) node_modules_taro_h5_prebundle_sync_recursive-_43133.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at node_modules_taro_h5_prebundle_sync_recursive-_43133.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_recoil_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_recoil_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-BPKV4WSY_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-BPKV4WSY_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-JK5NMFC3_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-JK5NMFC3_js.undefined.js:1:1) vendors-node_modules_taro_h5_prebundle_chunk-4E2JE7BB_js.undefined.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_taro_h5_prebundle_chunk-4E2JE7BB_js.undefined.js:1:1) jsonp chunk loading:27 Uncaught (in promise) ChunkLoadError: Loading chunk vendors-node_modules_taro_h5_prebundle_chunk-OZVEFK23_js failed.

环境信息

Taro CLI 3.5.0 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.14.0 
      Yarn: 1.22.19 
      npm: 8.3.1

@tarojs/cli@3.5.0 | MIT | deps: 38 | versions: 497
cli tool for taro
https://github.com/NervJS/taro#readme

keywords: taro, weapp

bin: taro

dist
.tarball: https://registry.npmmirror.com/@tarojs/cli/-/cli-3.5.0.tgz
.shasum: 363fb33eb4e180bedac8b1a88e5c94b97cac24c0
.integrity: sha512-1lgQfs2xt6RiIstMRJPdE3MLTXm5BC1kjTZxykNR8Uu3nAo4A6Al9rUzUw9lWLFoajH d9X64GY8V/PvQgeWiw==
.unpackedSize: 582.4 kB

dependencies:
@babel/template: ^7.14.5       @tarojs/taroize: 3.5.0         download-git-repo: ^2.0.0      inquirer: ^5.2.0               
@babel/traverse: ^7.14.5       @tarojs/transformer-wx: ^2.0.4 ejs: ^2.6.1                    joi: ^17.6.0                   
@babel/types: ^7.14.5          adm-zip: ^0.4.13               envinfo: ^6.0.1                latest-version: ^5.1.0         
@tarojs/helper: 3.5.0          babylon: ^6.18.0               eslint: ^8.12.0                lodash: ^4.17.21               
@tarojs/service: 3.5.0         better-babel-generator: 6.26.1 fs-extra: ^8.0.1               mem-fs-editor: 7.1.0           
@tarojs/shared: 3.5.0          cli-highlight: ^2.1.4          glob: ^7.1.2                   mem-fs: 2.2.1                  
(...and 14 more.)

maintainers:
- drchan <798095202@qq.com>
- defaultlee <weitaozsh@gmail.com>
- xuanzebin <492247143@qq.com>
- yuche <i@yuche.me>
- kyjo <bestkyjo@gmail.com>
- advancedcat <wshx1938@163.com>

dist-tags:
1.x: 1.3.46                         beta: 3.5.0-beta.8                  next: 3.2.2-beta.0                  
2.x: 2.2.18                         canary: 3.5.0-canary.1              theta: 3.5.0-theta.1                
3.0: 3.0.29                         experimental: 0.0.0-experimental.2  
alpha: 3.5.0-alpha.15               latest: 3.5.0                       

published 2 days ago by defaultlee <weitaozsh@gmail.com>

xiehui999 commented 2 years ago

1.编译时提示 postcss cssModules 未安装忽略； +1

ZakaryCode commented 2 years ago

cssModules 可以忽略，下个版本会去掉该提示
使用依赖预编译时，chunkFilename 不支持 [hash]、[chunkhash] 这一类的占位符
依赖预编译使用 esbuild 编译依赖，会导致部分 cjs 模块引入问题，该项目中需要将 vh-mobile 排除依赖预编译，配置如下：
```
compiler: {
type: 'webpack5',
prebundle: {
  enable: true,
  exclude: ['@vh-mobile/pro-components', '@vh-mobile/pro-services', '@vh-mobile/pro-utils']
},
}
```

zhouzyc commented 2 years ago

依赖预编译使用 esbuild 编译依赖，会导致部分 cjs 模块引入问题，该项目中需要将 vh-mobile 排除依赖预编译，配置如下：非常感谢，我还想请问下 vh-mobile 这个库中的cjs具体错误信息是什么，vh-mobile是自己写的我想可以自己继续修改vh-mobile打包方式

zhouzyc commented 2 years ago

cssModules 可以忽略，下个版本会去掉该提示

使用依赖预编译时，chunkFilename 不支持 [hash]、[chunkhash] 这一类的占位符

依赖预编译使用 esbuild 编译依赖，会导致部分 cjs 模块引入问题，该项目中需要将 vh-mobile 排除依赖预编译，配置如下：
  compiler: {
    type: 'webpack5',
    prebundle: {
      enable: true,
      exclude: ['@vh-mobile/pro-components', '@vh-mobile/pro-services', '@vh-mobile/pro-utils']
    },
  }

在根据你的指引下成功启动项目后有发现两个疑问： 1.在我的taro3.4配置中： { designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, } 在3.5中编译后明显大了许多，后将designWidth: 750修改为designWidth: 828就和以前大小相同

2.编译完成后浏览器直接启动打开页面成功，然后刷新页面页面报错：只有域名后面有路径刷新页面就会错误：xxxx/pages/index/index

ZakaryCode commented 2 years ago

1.在我的taro3.4配置中： { designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, } 在3.5中编译后明显大了许多，后将designWidth: 750修改为designWidth: 828就和以前大小相同

这是个 breaking，把 h5 修改为 640 会和以前版本一致，因为旧版本不接受 deviceRatio 参数，默认使用 640 对应的 deviceRatio

2.编译完成后浏览器直接启动打开页面成功，然后刷新页面页面报错

这个问题已经修复，随下一个版本释出

xiehui999 commented 2 years ago

1.在我的taro3.4配置中： { designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, } 在3.5中编译后明显大了许多，后将designWidth: 750修改为designWidth: 828就和以前大小相同

这是个 breaking，把 h5 修改为 640 会和以前版本一致，因为旧版本不接受 deviceRatio 参数，默认使用 640 对应的 deviceRatio

2.编译完成后浏览器直接启动打开页面成功，然后刷新页面页面报错

这个问题已经修复，随下一个版本释出

计划什么时候发？@ZakaryCode

JanYork commented 9 months ago

prebundle: { enable: true, exclude: ['@vh-mobile/pro-components', '@vh-mobile/pro-services', '@vh-mobile/pro-utils'] }, 这个配置可以解决，Taro官方居然不在文档里面提及一下，折腾一天

toFrankie commented 4 months ago

👀

NervJS / taro