如何解决“无法加载配置“airbnb-typescript”以扩展自。”在谷歌云构建上？

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 脚本相同。 我在 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"
  }
}

Dockerfile。 因此，它在 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": "eslint . src/ --ext .js,.jsx,.ts,.tsx", "lint:fix": "npm run lint -- --fix"，在“scripts”下的 package.json 中添加这两行。还要检查这个document，看看你是否必须根据你的情况在ESlint配置文件的“extends”字段中包含'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