taro 3.6.25 pnpm preact环境下h5报错

kmbjn2e3 于 8个月前发布在 React

关注(0)|答案(1)|浏览(83)

复现仓库

https://github.com/xiaof520/test.git
浏览器版本: edge
使用框架: React

复现步骤

package/utils/src/index.ts
workspace本地package，文件定义类型就会报错

期望结果

1

实际结果

ERROR in ../package/utils/src/index.ts 1:24
Module parse failed: Unexpected token (1:24)
File was processed with these loaders:

../node_modules/.pnpm/@prefresh webpack@ 3.2.3_@prefresh babel-plugin@0.4.1_preact@10.5.15_webpack@5.78.0/node_modules/@prefresh/webpack/src/loader/index.js
You may need an additional loader to handle the result of these loaders.
export const test = (yes: boolean) => {
| console.log(yes)
| return yes
@ ../package/utils/index.ts 1:0-28 1:0-28
@ ./src/pages/index/index.tsx 8:0-38 27:6-10
@ ./src/app.boot.js 36:15-44
@ ./src/app.config.ts 1:0-20

webpack 5.78.0 compiled with 1 error in 80 ms

环境信息

Taro CLI 3.6.25 environment info:
    System:
      OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
      Shell: 5.1.4 - /bin/bash
    Binaries:
      Node: 20.2.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 9.6.6 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.25 => 3.6.25 
      @tarojs/components: 3.6.25 => 3.6.25 
      @tarojs/helper: 3.6.25 => 3.6.25 
      @tarojs/plugin-framework-react: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-alipay: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-h5: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-jd: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-qq: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-swan: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-tt: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-weapp: 3.6.25 => 3.6.25 
      @tarojs/runtime: 3.6.25 => 3.6.25 
      @tarojs/shared: 3.6.25 => 3.6.25 
      @tarojs/taro: 3.6.25 => 3.6.25 
      @tarojs/taro-loader: 3.6.25 => 3.6.25 
      @tarojs/webpack5-runner: 3.6.25 => 3.6.25 
      babel-preset-taro: 3.6.25 => 3.6.25 
      eslint-config-taro: 3.6.25 => 3.6.25 
      taro-ui: ^3.2.1 => 3.2.1 
    npmGlobalPackages:
      typescript: 5.1.3

taro

来源：https://github.com/NervJS/taro/issues/15480

1条答案

按热度按时间

scyqe7ek1#

正好遇到一样的报错，在这里简单记录下。

我项目中的报错：

@ ./mock/index.js 5:0-36 11:34-39
@ ./src/app.ts 41:0-26
@ ./src/app.config.ts 5:0-30 39:19-28 40:25-34

就很奇怪 app.config.ts 为什么会依赖 app.ts ，这也导致了一开始排查方向错了。

出错原因

src 中的项目代码引入了 src 之外的项目代码，被引入的这部分代码（ ts 语法）没有走 babel-loader 就报错了。

问题分析

看了你的问题，定位到是 3.6.25 开始出错的，对比了 3.6.24 的代码，找到了下面的差异：

3.6.24 默认不配置 compile.include 时是没有 include 的。

taro/packages/taro-webpack5-runner/src/webpack/H5WebpackModule.ts

Lines 268 to 274 in d9452a6

| | }elseif(compile.include&&compile.include.length){ |
| | rule.include=[ |
| | ...compile.include, |
| | sourceDir, |
| | filename=>/taro/.test(filename) |
| | ] |
| | }else{ |

3.6.25 默认有 include 其中包含了 src ，即使没配置 compile.include 。

taro/packages/taro-webpack5-runner/src/webpack/H5WebpackModule.ts

Lines 263 to 269 in e2a58bb

| | rule.include=[ |
| | sourceDir, |
| | filename=>/(?<=node_modules[\/]).*taro/.test(filename) |
| | ] |
| | if(Array.isArray(compile.include)){ |
| | rule.include.unshift(...compile.include) |
| | } |

相当于是 3.6.25 起， babel-loader 默认编译范围从 非 node_modules 范围收缩为 src 范围。
这个变化应该属于 BREAKING CHANGE 了，却没有在 Changelog 和文档中提及。靠对比代码定位问题也挺累的。

解决办法

3.6.25 起，如果需要引入 src 之外的代码（比如 ts 代码需要额外编译），需要手动添加 compile.include 配置。

针对你的项目结构，在 config/index.ts 中添加如下代码可以解决报错：

import path from "node:path";
export default {
  // ...
  mini: {
    // ...
    compile: {
      include: [path.resolve(__dirname, "../../package")],
    },
  },
  h5: {
    // ...
    compile: {
      include: [path.resolve(__dirname, "../../package")],
    },
  },
};