解决build问题TypeScript error in /X/node_modules/@types/babel__traverse/index.d.ts Type expected. TS1110

一个几年没有动过的前端工程，上次发布成功还是在21年，过去了3年，现在在docker中对前端工程进行build的时候，一直报一个错误：

#13 127.9 Creating an optimized production build...
#13 293.5 Failed to compile.
#13 293.5 
#13 293.5 /finance_core_frontend/node_modules/@types/babel__traverse/index.d.ts
#13 293.5 TypeScript error in /finance_core_frontend/node_modules/@types/babel__traverse/index.d.ts(314,13):
#13 293.5 Type expected.  TS1110
#13 293.5 
#13 293.5     312 |         // too complex for TS. So we type it as a general visitor only if the key contains `|`
#13 293.5     313 |         // this is good enough for non-visitor traverse options e.g. `noScope`
#13 293.5   > 314 |         [k: `${string}|${string}`]: VisitNode<S, Node>;
#13 293.5         |             ^
#13 293.5     315 |     };
#13 293.5     316 | 
#13 293.5     317 | export type VisitNode<S, P extends Node> = VisitNodeFunction<S, P> | VisitNodeObject<S, P>;
#13 293.5 
#13 293.5 
#13 293.6 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#13 293.6 error Command failed with exit code 1.
#13    completed: 2024-03-05 08:51:16.276493854 +0000 UTC
#13     duration: 4m54.10665194s
#13        error: "process \"/bin/sh -c yarn && yarn build\" did not complete successfully: exit code: 1"

process "/bin/sh -c yarn && yarn build" did not complete successfully: exit code: 1
Build step 'Execute shell' marked build as failure
Finished: FAILURE

package.json如下：

{
  "name": "XXXX",
  "homepage": "XXXX",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@ant-design/icons-react": "^2.0.1",
    "@craco/craco": "^5.6.4",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.1",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.0.11",
    "@types/echarts": "^4.6.3",
    "@types/history": "^4.7.6",
    "@types/jest": "^26.0.4",
    "@types/node": "^14.0.23",
    "@types/numeral": "^0.0.28",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "antd": "^4.4.1",
    "axios": "^0.19.2",
    "craco-less": "^1.17.0",
    "echarts": "^4.8.0",
    "echarts-for-react": "^2.0.16",
    "eusjs": "^1.1.3",
    "http-proxy-middleware": "^1.0.6",
    "numeral": "^2.0.6",
    "rc-banner-anim": "^2.4.4",
    "react": "^16.13.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.9.6"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

dockerfile如下：

# stage: 1
FROM node:14.15 as react-build
WORKDIR /finance_core_frontend

COPY . ./

RUN yarn && yarn build

# Stage 2 - the production environment
FROM nginx:alpine
#更改容器时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /finance_core_frontend/build /usr/share/nginx/html
RUN chmod -R o+r /usr/share/nginx/html
EXPOSE 3600
CMD ["nginx", "-g", "daemon off;"]

 

查了很久的资料，终于解决了，原因是typescript 和 react-script的版本有冲突导致的：

可参考：

[@types/babel__traverse] Type Expected issue with @types/babel__traverse package · Issue #65766 · DefinitelyTyped/DefinitelyTyped · GitHub

关键还是下面这哥们的一句话：

将react-script的版本， "react-scripts": "3.4.1", 改成4.0.3，解决了问题。

特此记录