使用react-app-rewired构建项目时遇Unexpected token错误求助

问题概述 #

Node版本14.19.3，项目几周前可正常构建，现在执行npm run build时失败，报错指向pdfmake/build/pdfmake.js中的嵌套C风格注释无法被Webpack解析，多次调整依赖未解决。

报错信息 #

Creating an optimized production build...
Failed to compile.

./node_modules/pdfmake/build/pdfmake.js 15400:112
Module parse failed: Unexpected token (15400:112)

You may need an appropriate loader to handle this file type.

|        *     not null.
|        */
>       function gen_bitlen(s, desc) /*    deflate_state *s;*/ /*    tree_desc *desc;    /* the tree descriptor */*/{
|         var tree = desc.dyn_tree;
|         var max_code = desc.max_code;

npm ERR! code ELIFECYCLE
npm ERR! errno 1

项目依赖（package.json） #

{
    "name": "foo",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "@hookform/resolvers": "^2.9.7",
        "amazon-cognito-identity-js": "^4.3.2",
        "aws-amplify": "^3.0.7",
        "aws-amplify-react": "^3.1.1",
        "axios": "^0.21.1",
        "chart.js": "^2.9.3",
        "crypto-js": "^3.1.9-1",
        "exif-js": "2.3.0",
        "formik": "^2.0.4",
        "framer-motion": "^1.6.17",
        "i": "^0.3.6",
        "lyef-switch-button": "^2.0.1",
        "materialize-css": "^1.0.0-rc.2",
        "moment": "^2.24.0",
        "node-sass": "^4.14.0",
        "pdfmake": "0.1.41",
        "react": "16.8.6",
        "react-chartjs-2": "^2.8.0",
        "react-csv": "^2.0.3",
        "react-dom": "16.8.6",
        "react-gtm-module": "^2.0.7",
        "react-hook-form": "^4.9.8",
        "react-idle-timer": "^5.4.0",
        "react-input-mask": "^2.0.4",
        "react-input-range": "^1.3.0",
        "react-loading-io": "^2.2.0",
        "react-materialize": "3.3.5",
        "react-number-format": "^4.2.0",
        "react-owl-carousel": "^2.3.3",
        "react-range-picker": "0.6.1",
        "react-redux": "^7.1.0-rc.1",
        "react-responsive": "^7.0.0",
        "react-responsive-modal": "6.1.0",
        "react-router-dom": "^5.1.0",
        "react-scripts": "2.1.8",
        "react-scroll": "1.7.7",
        "react-select": "^3.1.0",
        "react-super-responsive-table": "^5.1.1",
        "react-switch": "^5.0.1",
        "react-toastify": "^5.4.1",
        "react-toasts": "^3.0.6",
        "redux": "4.0.1",
        "redux-actions": "2.6.5",
        "redux-logger": "3.0.6",
        "redux-persist": "^5.10.0",
        "redux-react-session": "2.5.0",
        "redux-thunk": "2.3.0",
        "semantic-ui-react": "^0.88.1",
        "uuid": "^7.0.3",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-app-rewired start ",
        "build": "react-app-rewired  build ",
        "test": " ",
        "eject": "react-scripts eject",
        "generate-build-version": "node generate-build-version",
        "prebuild": "npm run generate-build-version"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "react-app-env": "^1.2.3",
        "react-app-rewired": "^2.1.5"
    }
}

解决方案 #

方案1：升级react-scripts版本 #

react-scripts 2.x配套的Webpack版本无法处理嵌套C风格注释，升级到3.x及以上版本可解决：

npm install react-scripts@3.4.4 --save

升级后需检查react、react-dom等依赖是否兼容，必要时同步调整版本。

方案2：配置react-app-rewired添加babel处理规则 #

通过自定义Webpack配置，让babel-loader处理pdfmake的文件：

1. 安装依赖：

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-comments --save-dev

2. 在项目根目录创建或修改config-overrides.js：

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /pdfmake\.js$/,
    include: /node_modules\/pdfmake\/build/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-comments']
      }
    }
  });
  return config;
};

3. 重新执行构建：

npm run build

方案3：升级pdfmake版本 #

更高版本的pdfmake已修复注释问题，直接升级：

npm install pdfmake@latest --save

升级后需验证项目中pdfmake的API调用是否正常，避免兼容性问题。

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