Home
Support Forums

Error deploying create-react-error "Failed to load config "plugin:react/jsx-runtime" to extend from.Referenced from: /opt/build/repo/.eslintrc.js"

Hello, I can’t deploy this create-react-app. The local build is succeeding with no warnings.

The error is this:

4:38:56 PM: Failed to compile.
4:38:56 PM: 
4:38:56 PM: Failed to load config "plugin:react/jsx-runtime" to extend from.
4:38:56 PM: Referenced from: /opt/build/repo/.eslintrc.js

After reading some other issues in this forum, I moved all my devDependencies to dependencies, but still no luck at all.

The build config is as follows:

The package.json file:

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^1.0.15",
    "@chakra-ui/react": "^1.6.8",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "framer-motion": "^4.1.17",
    "luxon": "^2.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.25.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.26.1",
    "husky": "^7.0.0",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "lint": "eslint 'src/**/*.js'",
    "lint:fix": "npm run lint -- --fix"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

And .eslintrc.js file:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 11,
    sourceType: "module",
  },
  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:react/jsx-runtime"],
  plugins: [],
  rules: {
    "react/prop-types": 0,
  },
};

The full log file:

4:36:54 PM: Build ready to start
4:36:56 PM: build-image version: 3bcb38c35508b42e9121d4badfe6d8c66fd7a3f0
4:36:56 PM: build-image tag: v4.3.2
4:36:56 PM: buildbot version: 859bdc5325a1875086bf140c3942c20beced1f0f
4:36:57 PM: Fetching cached dependencies
4:36:57 PM: Failed to fetch cache, continuing with build
4:36:57 PM: Starting to prepare the repo for build
4:36:57 PM: No cached dependencies found. Cloning fresh repo
4:36:57 PM: git clone https://github.com/...
4:36:58 PM: Preparing Git Reference refs/heads/main
4:36:59 PM: Parsing package.json dependencies
4:36:59 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
4:36:59 PM: Starting build script
4:37:00 PM: Installing dependencies
4:37:00 PM: Python version set to 2.7
4:37:00 PM: v16.10.0 is already installed.
4:37:01 PM: Now using node v16.10.0 (npm v7.24.0)
4:37:01 PM: Started restoring cached build plugins
4:37:01 PM: Finished restoring cached build plugins
4:37:01 PM: Attempting ruby version 2.7.2, read from environment
4:37:03 PM: Using ruby version 2.7.2
4:37:03 PM: Using PHP version 8.0
4:37:03 PM: Started restoring cached yarn cache
4:37:03 PM: Finished restoring cached yarn cache
4:37:03 PM: Installing yarn at version 1.22.10
4:37:03 PM: Installing Yarn!
4:37:03 PM: > Downloading tarball...
4:37:03 PM: [1/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz --> /tmp/yarn.tar.gz.lyT1Pk1TM7
4:37:03 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
4:37:03 PM:                                  Dload  Upload   Total   Spent    Left  Speed
4:37:03 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
4:37:03 PM: 100    81  100    81    0     0    686      0 --:--:-- --:--:-- --:--:--   686
4:37:03 PM: 100    81  100    81    0     0    686      0 --:--:-- --:--:-- --:--:--   680
4:37:04 PM: 100    95  100    95    0     0    293      0 --:--:-- --:--:-- --:--:--   293
4:37:04 PM: 100   626  100   626    0     0   1174      0 --:--:-- --:--:-- --:--:--  1174
4:37:04 PM: 100 1215k  100 1215k    0     0  1359k      0 --:--:-- --:--:-- --:--:-- 1359k
4:37:04 PM: [2/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz.asc --> /tmp/yarn.tar.gz.lyT1Pk1TM7.asc
4:37:04 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
4:37:04 PM:                                  Dload  Upload   Total   Spent    Left  Speed
4:37:04 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
4:37:04 PM: 100    85  100    85    0     0   1287      0 --:--:-- --:--:-- --:--:--  1287
4:37:04 PM: 100    99  100    99    0     0   1042      0 --:--:-- --:--:-- --:--:--  1042
4:37:04 PM: 100   630  100   630    0     0   5163      0 --:--:-- --:--:-- --:--:--  5163
4:37:04 PM: 100   832  100   832    0     0   6208      0 --:--:-- --:--:-- --:--:--  6208
4:37:04 PM: > Verifying integrity...
4:37:04 PM: gpg: Signature made Fri 02 Oct 2020 11:17:27 AM UTC
4:37:04 PM: gpg:                using RSA key 6D98490C6F1ACDDD448E45954F77679369475BAA
4:37:04 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>" [unknown]
4:37:04 PM: gpg: WARNING: This key is not certified with a trusted signature!
4:37:04 PM: gpg:          There is no indication that the signature belongs to the owner.
4:37:04 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
4:37:04 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
4:37:04 PM: > GPG signature looks good
4:37:04 PM: > Extracting to ~/.yarn...
4:37:04 PM: > Adding to $PATH...
4:37:05 PM: > Successfully installed Yarn 1.22.10! Please open another terminal where the `yarn` command will now be available.
4:37:05 PM: No yarn workspaces detected
4:37:05 PM: Started restoring cached node modules
4:37:05 PM: Finished restoring cached node modules
4:37:06 PM: Installing NPM modules using Yarn version 1.22.10
4:37:06 PM: yarn install v1.22.10
4:37:06 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
4:37:06 PM: [1/4] Resolving packages...
4:37:16 PM: [2/4] Fetching packages...
4:37:54 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
4:37:54 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
4:37:54 PM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
4:37:54 PM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
4:37:54 PM: [3/4] Linking dependencies...
4:37:54 PM: warning " > @chakra-ui/icons@1.0.15" has unmet peer dependency "@chakra-ui/system@>=1.0.0".
4:37:54 PM: warning "@chakra-ui/icons > @chakra-ui/icon@1.1.11" has unmet peer dependency "@chakra-ui/system@>=1.0.0".
4:37:54 PM: warning "@emotion/styled > @emotion/babel-plugin@11.3.0" has unmet peer dependency "@babel/core@^7.0.0".
4:37:54 PM: warning "@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
4:37:54 PM: warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
4:37:54 PM: warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
4:37:54 PM: warning "cz-conventional-changelog > @commitlint/load > @endemolshinegroup/cosmiconfig-typescript-loader > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
4:38:18 PM: [4/4] Building fresh packages...
4:38:19 PM: success Saved lockfile.
4:38:19 PM: $ husky install
4:38:20 PM: husky - Git hooks installed
4:38:20 PM: Done in 73.41s.
4:38:20 PM: NPM modules installed using Yarn
4:38:20 PM: Started restoring cached go cache
4:38:20 PM: Finished restoring cached go cache
4:38:20 PM: go version go1.16.5 linux/amd64
4:38:20 PM: go version go1.16.5 linux/amd64
4:38:20 PM: Installing missing commands
4:38:20 PM: Verify run directory
4:38:22 PM: ​
4:38:22 PM: ────────────────────────────────────────────────────────────────
4:38:22 PM:   Netlify Build                                                 
4:38:22 PM: ────────────────────────────────────────────────────────────────
4:38:22 PM: ​
4:38:22 PM: ❯ Version
4:38:22 PM:   @netlify/build 18.13.10
4:38:22 PM: ​
4:38:22 PM: ❯ Flags
4:38:22 PM:   baseRelDir: true
4:38:22 PM:   buildId: 615f06061ca288000753e7d5
4:38:22 PM:   deployId: 615f06061ca288000753e7d7
4:38:22 PM: ​
4:38:22 PM: ❯ Current directory
4:38:22 PM:   /opt/build/repo
4:38:22 PM: ​
4:38:22 PM: ❯ Config file
4:38:22 PM:   No config file was defined: using default values.
4:38:22 PM: ​
4:38:22 PM: ❯ Context
4:38:22 PM:   production
4:38:22 PM: ​
4:38:22 PM: ────────────────────────────────────────────────────────────────
4:38:22 PM:   1. Build command from Netlify app                             
4:38:22 PM: ────────────────────────────────────────────────────────────────
4:38:22 PM: ​
4:38:22 PM: $ npm run build
4:38:22 PM: > app-namet@0.1.0 build
4:38:22 PM: > react-scripts build
4:38:24 PM: (node:1415) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /opt/build/repo/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
4:38:24 PM: Update this package.json to use a subpath pattern like "./*".
4:38:24 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
4:38:24 PM: Creating an optimized production build...
4:38:25 PM: Browserslist: caniuse-lite is outdated. Please run:
4:38:25 PM: npx browserslist@latest --update-db
4:38:25 PM: Why you should do it regularly:
4:38:25 PM: https://github.com/browserslist/browserslist#browsers-data-updating
4:38:56 PM: Failed to compile.
4:38:56 PM: 
4:38:56 PM: Failed to load config "plugin:react/jsx-runtime" to extend from.
4:38:56 PM: Referenced from: /opt/build/repo/.eslintrc.js
4:38:56 PM: ​
4:38:56 PM: ────────────────────────────────────────────────────────────────
4:38:56 PM:   "build.command" failed                                        
4:38:56 PM: ────────────────────────────────────────────────────────────────
4:38:56 PM: ​
4:38:56 PM:   Error message
4:38:56 PM:   Command failed with exit code 1: npm run build
4:38:56 PM: ​
4:38:56 PM:   Error location
4:38:56 PM:   In Build command from Netlify app:
4:38:56 PM:   npm run build
4:38:56 PM: ​
4:38:56 PM:   Resolved config
4:38:56 PM:   build:
4:38:56 PM:     command: npm run build
4:38:56 PM:     commandOrigin: ui
4:38:56 PM:     publish: /opt/build/repo/build
4:38:56 PM:     publishOrigin: ui
4:38:57 PM: Caching artifacts
4:38:57 PM: Started saving node modules
4:38:57 PM: Finished saving node modules
4:38:57 PM: Started saving build plugins
4:38:57 PM: Finished saving build plugins
4:38:57 PM: Started saving yarn cache
4:39:04 PM: Finished saving yarn cache
4:39:04 PM: Started saving pip cache
4:39:04 PM: Finished saving pip cache
4:39:04 PM: Started saving emacs cask dependencies
4:39:04 PM: Finished saving emacs cask dependencies
4:39:04 PM: Started saving maven dependencies
4:39:04 PM: Finished saving maven dependencies
4:39:04 PM: Started saving boot dependencies
4:39:04 PM: Finished saving boot dependencies
4:39:04 PM: Started saving rust rustup cache
4:39:04 PM: Finished saving rust rustup cache
4:39:04 PM: Started saving go dependencies
4:39:04 PM: Finished saving go dependencies
4:39:06 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
4:39:06 PM: Creating deploy upload records
4:39:06 PM: Failing build: Failed to build site
4:39:06 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
4:39:06 PM: Finished processing build request in 2m9.57224818s
```
Building locally with the netlify CLI apparently works, don't know what is happening.

```
> netlify build
​
────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────
​
❯ Version
  @netlify/build 18.13.9
​
❯ Flags
  dry: false
  offline: false
​
❯ Current directory
  /home/ernesto/src/seguimiento-florin-react
​
❯ Config file
  /home/ernesto/src/seguimiento-florin-react/netlify.toml
​
❯ Context
  production
​
────────────────────────────────────────────────────────────────
  1. build.command from netlify.toml
────────────────────────────────────────────────────────────────
​
$ npm run build

> seguimiento-florin-react@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  135.49 KB  build/static/js/2.0ffe5376.chunk.js
  2.52 KB    build/static/js/main.0ff90115.chunk.js
  1.64 KB    build/static/js/3.7462ccd3.chunk.js
  1.18 KB    build/static/js/runtime-main.fc872294.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

​
(build.command completed in 9.1s)
​
────────────────────────────────────────────────────────────────
  2. Functions bundling
────────────────────────────────────────────────────────────────
​
No Functions were found in netlify/functions directory
​
(Functions bundling completed in 4ms)
​
────────────────────────────────────────────────────────────────
  Netlify Build Complete
────────────────────────────────────────────────────────────────
​
(Netlify Build completed in 9.1s)
```

I made it work with this workaround, even though is not the recommended way to go. I would like to know why it didn’t work previously.

Basically I decided to remove the plugin giving the error and disable the rule that this plugin was managing

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 11,
    sourceType: "module",
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  plugins: ["react"],
  rules: {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": "off",
  },
};
1 Like

Hi @ErnestoGS,

Good to know you found a solution. However, I can’t comment on why it didn’t work before. Do you have a repo that we could test?

No, sorry, it is a private repo.

Hey there, @ErnestoGS :wave:

Glad everything is working for you now! Unfortunately, without a private repo or additional information, we won’t be able to look into the original cause further. That being said, please don’t hesitate to come back should this error pop up again.