时间戳

首页 > 解决方案 > 由于 docker build 中的 TypeScript 错误，npm run build 失败

reactjs - 由于 docker build 中的 TypeScript 错误，npm run build 失败

问题描述

Failed to compile.

/app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts
TypeScript error in /app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts(2,13):
'=' expected.  TS1005

  1 | import * as React from 'react';
> 2 | import type { IconDefinition } from '@ant-design/icons-svg/lib/types';
  |             ^
  3 | import type { IconBaseProps } from './Icon';
  4 | import { getTwoToneColor, TwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
  5 | export interface AntdIconProps extends IconBaseProps {

我的 package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/react-native-fetch-blob": "^0.10.5",
    "@types/react-select": "^3.0.16",
    "@types/rn-fetch-blob": "^1.2.1",
    "antd": "^4.2.4",
    "common-tags": "^1.8.0",
    "lodash": "^4.17.19",
    "moment": "^2.26.0",
    "node-sass": "^4.13.1",
    "normalize.css": "^8.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0",
    "socket.io-client": "^2.3.0",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9000 -c .storybook"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.3.18",
    "@storybook/addon-info": "^5.3.18",
    "@storybook/addon-knobs": "^5.3.18",
    "@storybook/addon-notes": "^5.3.18",
    "@storybook/addons": "^5.3.18",
    "@storybook/preset-create-react-app": "^2.1.2",
    "@storybook/react": "^5.3.18",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/common-tags": "^1.8.0",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.150",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.4",
    "@types/redux": "^3.6.0",
    "@types/socket.io-client": "^1.4.32",
    "babel-loader": "8.1.0",
    "react-docgen-typescript-loader": "^3.7.2"
  }
}

我的 Dockerfile

FROM node:12 as builder

WORKDIR /app

COPY package.json .
RUN npm install
COPY . ./
RUN npm run build

FROM nginx:stable
COPY --from=builder /app/build /usr/share/nginx/html

谷歌搜索后知道了这个问题https://github.com/ant-design/ant-design/issues/23266#issuecomment-613773502 you need update @types/react。我试过了"@types/react" : "17.0.1"。但没有帮助。

标签： reactjsnpmantd

解决方案

Antdv4.2.4使用 TypeScript v3.9.2。

import type自 TypeScript 起支持编译器抱怨的功能v3.8。

这个功能是大多数用户可能永远不需要考虑的；但是，如果您在 --isolatedModules、TypeScript 的 transpileModule API 或 Babel 下遇到问题，则此功能可能是相关的。

import type { SomeThing } from "./some-module.js";
export type { SomeThing };

来源：https ://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

将本地 TypeScript 版本从更新v3.7.2到至少v3.8.

推荐阅读