Nginx Question posted in
The official documentation can be found here.

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

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: > [email protected] 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! [email protected] build: `craco build`
Step #0: npm ERR! Exit status 1
Step #0: npm ERR! 
Step #0: [0m[91mnpm ERR! Failed at the [email protected] 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',
  },
};
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    This is clearly an issue with React js application and has nothing to do with Cloud Build setup.

    You are running https://www.npmjs.com/package/@craco/craco which in turn runs eslint. You have dependency on airbnb-typescript eslint configuration but seems you have not installed it. You have listed eslint-config-airbnb-typescript as devDependency, but you didn’t installed dev dependencies.
    Again craco runs eslint which is configured to use dependency which is only installed as development dependency and but have not installed development dependencies. Make sure that "eslint-config-airbnb-typescript" is in their regular dependencies or install dev dependencies before running craco.

    Login or Signup to reply.
  3. 0

    I have recently built the tailwind-css example from the MUI repo. I got a successful compilation by moving the tailwind-css directory of its own, outside of MUI. Hopefully someone reading this finds it helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search