typescript - 如何解决 "Failed to load config "airbnb-typescript"to extend from."on Google Cloud Build？

Question

TL;DR，错误:

Step #0: Creating an optimized production build...
Step #0: Failed to compile.
Step #0: 
Step #0: Failed to load config "airbnb-typescript" to extend from.
Step #0: Referenced from: /app/.eslintrc.js

我正在尝试使用 Tailwind CSS、Craco 和 React 以及 Docker 构建一个前端项目。我有一个类似的项目在运行，只是没有 Tailwind 和 Craco，但使用相同的 eslint 设置，这没有出现任何问题。

我在 Google Cloud Build 上运行 DockerFile，但它在 .eslintrc.js 上失败了。在本地，DockerFile 运行没有任何问题，就像在本地运行 npm run build script 一样。我在 Cloud build 上找不到关于这个错误的任何信息，所以希望有人知道如何解决这个问题。

我也已将我在本地构建的 Dockerfile 推送到 Google Cloud 上的 Container Images，但也没有成功。

当我从 .eslintrc.js 中的 extends 数组中删除 "airbnb-typescript" 时，它会抛出同样的错误，仅使用 extends 数组中的下一个包，在本例中为 'airbnb/hooks'。

这是 Google Cloud Build 错误日志的一部分:

Step #0: Step 9/14 : RUN npm run build
Step #0:  ---> Running in 4a21e90bac22
Step #0: 
Step #0: > react-tailwind-frontend@0.1.0 build /app
Step #0: > craco build
Step #0: 
Step #0: Creating an optimized production build...
Step #0: Failed to compile.
Step #0: 
Step #0: Failed to load config "airbnb-typescript" to extend from.
Step #0: Referenced from: /app/.eslintrc.js
Step #0: 
Step #0: 
Step #0: [91mnpm[0m[91m ERR! code ELIFECYCLE
Step #0: [0m[91mnpm[0m[91m [0m[91mERR! [0m[91merrno 1
Step #0: [0m[91mnpm ERR! react-tailwind-frontend@0.1.0 build: `craco build`
Step #0: npm ERR! Exit status 1
Step #0: npm ERR! 
Step #0: [0m[91mnpm ERR! Failed at the react-tailwind-frontend@0.1.0 build script.
Step #0: npm [0m[91mERR![0m[91m This is probably not a problem with npm. There is likely additional logging output above.
Step #0: [0m[91m
Step #0: npm ERR! A complete log of this run can be found in:
Step #0: npm ERR!     /root/.npm/_logs/2021-04-15T07_41_43_989Z-debug.log
Step #0: The command '/bin/sh -c npm run build' returned a non-zero code: 1
Finished Step #0
ERROR
ERROR: build step 0 "gcr.io/cloud-builders/docker" failed: step exited with non-zero status: 1
Step #0: [0m

Package.json

{
  "name": "react-tailwind-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.10",
    "@craco/craco": "^6.1.1",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.16",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.0",
    "autoprefixer": "^9.8.6",
    "graphql": "^15.5.0",
    "postcss": "^7.0.35",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "subscriptions-transport-ws": "^0.9.18",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
    "typescript": "^4.1.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "codegen": "graphql-codegen --config codegen.yml --watch -r dotenv/config",
    "dev": "craco start",
    "dev:all": "REACT_APP_REMOTE_URL=http://localhost:4001 npm-run-all -p dev codegen -c -l",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"**/*.ts{,x}\"",
    "lint": "tsc --noEmit && eslint -c ./.eslintrc.js  \"**/*.ts{,x}\" --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@graphql-codegen/cli": "1.20.1",
    "@graphql-codegen/introspection": "1.18.1",
    "@graphql-codegen/typescript": "1.21.0",
    "@graphql-codegen/typescript-operations": "1.17.14",
    "@graphql-codegen/typescript-react-apollo": "2.2.1",
    "@typescript-eslint/eslint-plugin": "^4.15.0",
    "@typescript-eslint/parser": "^4.15.0",
    "babel-eslint": "^10.1.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.10.1",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "stylelint-config-recommended": "^3.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": "eslint --cache --fix",
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --write"
  }
}

Docker 文件。因此，它在 npm run build 时失败了:

FROM node:14-alpine as frontend-builder

ARG REACT_APP_REMOTE_URL
ARG REACT_APP_WS_URL

WORKDIR /app

COPY package.json package-lock.json /app/

ENV NODE_ENV production

RUN npm install

COPY ./ /app

RUN npm run build

FROM nginx:stable-alpine

RUN rm -rf /usr/share/nginx/html/*

COPY --from=frontend-builder /app/build /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/nginx.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

.eslintrc.js

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'prettier/@typescript-eslint',
    'prettier',
    'prettier/react',
  ],
  plugins: ['react', '@typescript-eslint', 'react-hooks'],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
  rules: {
    'linebreak-style': 'off',
  },
};

Answer 1

此错误可能有多种可能性和原因。我列出了其中一些供您查看、分析和试用。

1. 将 typescript 插件添加到 .eslintrc，使用 extends option in.eslintrc

   extends: [
    "plugin:import/errors", 
    "plugin:import/warnings",
    "plugin:import/typescript",
    ],
   

2. 你需要安装这个包:

   yarn add -D eslint-import-resolver-typescript
   

   然后将其添加到您的 .eslintrc.js 文件或 .eslintrc.json配置文件:

       { 
   ... settings: { 
   ...
   'import/resolver': {
    node: { 
              extensions: ['.js', '.jsx', '.ts', '.tsx'], 
              moduleDirectory: ['node_modules', 'src/'], 
   },
      },
          } 
            }
   

3. 根据这个GitHub solution ，问题可以通过以下方式解决:

   创建 .env 文件并包含:

   SKIP_PREFLIGHT_CHECK=true
   ESLINT_NO_DEV_ERRORS=true
   

   创建 .env.production 文件并包含:

   SKIP_PREFLIGHT_CHECK=true
   DISABLE_ESLINT_PLUGIN=true
   PUBLIC_URL=/my-app
   

4. 通过删除当前的“lint”并将其替换为 “lint”，在“scripts”下的 package.json 中添加这两行:“eslint .src/--ext .js,.jsx, .ts,.tsx", "lint:fix": "npm run lint -- --fix"。还要检查这个 document查看是否必须根据您的情况在 ESlint 配置文件的“扩展”字段中包含 'airbnb','airbnb-typescript','airbnb-base','airbnb-typescript/base'

   查看下面的每个引用资料，因为有多个针对这个问题提出的解决方案，可以帮助大家查看和分析了解各种替代方案以及其他人如何解决它。

• https://github.com/facebook/create-react-app/issues/9887
  
• https://github.com/import-js/eslint-plugin-import#typescript
  
• https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin