更新依赖后webpack编译yoga-layout遇模块解析错误求助

问题场景 #

更新项目依赖后执行npm install失败，添加--force或--legacy-peer-deps参数后完成安装，但webpack编译时出现如下错误：

ERROR in ../../node_modules/yoga-layout/src/generated/YGEnums.ts 10:7
Module parse failed: Unexpected token (10:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

// @generated by enums.py

export enum Align {
| Auto = 0,
| FlexStart = 1,
webpack compiled with 1 error (05b2b0b974e03a93)
No errors found.

原因分析 #

yoga-layout包中包含未编译的TypeScript文件（YGEnums.ts），而你的webpack配置未配置处理node_modules中该类TS文件的loader，或者当前的ts-loader/babel-loader规则默认排除了node_modules目录，导致无法解析TypeScript的enum语法。

解决方案 #

方案1：调整webpack loader规则，包含yoga-layout文件 #

修改webpack配置中处理TS/TSX文件的规则，将yoga-layout从排除列表中移除：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        // 排除node_modules中除yoga-layout以外的目录
        exclude: /node_modules\/(?!yoga-layout)/,
        use: 'ts-loader', // 替换为你项目中使用的TS loader
      },
    ],
  },
};

方案2：用Babel处理TypeScript语法 #

如果项目使用Babel编译，确保安装@babel/preset-typescript，并调整webpack规则让Babel处理yoga-layout的文件：

1. 安装依赖：

npm install @babel/preset-typescript --save-dev

2. 修改webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules\/(?!yoga-layout)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react', // 若项目用React则保留
              '@babel/preset-typescript'
            ],
          },
        },
      },
    ],
  },
};

方案3：降级yoga-layout到兼容版本 #

若不想修改配置，可尝试降级yoga-layout到已预编译TS文件的稳定版本。先查看项目之前的lock文件找到可用版本，再执行安装：

npm install yoga-layout@x.x.x --save

将x.x.x替换为之前项目能正常编译的版本号。

额外提示 #

使用--force或--legacy-peer-deps强制安装依赖可能引发版本兼容问题，这是此类编译错误的潜在诱因。后续优先解决peer依赖冲突（比如调整相关依赖版本），而非直接强制安装。

内容的提问来源于stack exchange，提问作者Lamin Suwareh