How to solve "Failed to load config "airbnb-typescript" to extend from." on Google Cloud Build?

user_4417425 0
Viewed 6559

TL;DR, the error:

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

I am trying to build a frontend project with Tailwind CSS, Craco and React, with Docker. I have a similar project running, only without Tailwind and Craco, but with the same eslint settings, which is not giving any problems.

I am running a DockerFile on Google Cloud Build, which is failing on .eslintrc.js . Locally, the DockerFile is running without any problems, same as running npm run build script locally. I can not find any information about this error on Cloud build, so hopefully someone knows how to solve this.

I also have pushed the Dockerfile I build locally to Container Images on Google Cloud, but also no success.

When I delete the "airbnb-typescript" from the extends array in .eslintrc.js, it will throw the same error, only with the next package in the extends array, which is 'airbnb/hooks' in this case.

This is the part of the error log on 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. So, it fails at 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',
  },
};
google-cloud-build dockerfile eslint typescript google-cloud-platform
1 Answers

There can be multiple possibilities and causes for this error. I am listing some of them for you to look, analyse and try upon.

  1. Add the typescript plugin to .eslintrc, using the extends option in .eslintrc

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

  2. You need to install this package:

    yarn add -D eslint-import-resolver-typescript

    Then add this to your .eslintrc.js file or .eslintrc.json configuration file:

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

  3. As per this GitHub solution, the issue can be fixed by :

    Creating .env file and include :

    SKIP_PREFLIGHT_CHECK=true
ESLINT_NO_DEV_ERRORS=true

    Creating .env.production file and include :

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

  4. Add these two lines in package.json under "scripts" by removing the current "lint" and replacing it with "lint": "eslint . src/ --ext .js,.jsx,.ts,.tsx", "lint:fix": "npm run lint -- --fix". Also check this document to see if you have to include 'airbnb','airbnb-typescript','airbnb-base','airbnb-typescript/base' in "extends" field in ESlint config file depending on your case

    Have a look at each of the references below, as there are multiple solutions proposed to this issue and can help you look and analyse at the various alternatives and how others solved it.

user_158033650
Related