Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' when deploying a create-react-app

Question

I'm new to create-react-app. I just made a quick setup with redux and react-router-dom which builds nicely on my computer using yarn build, but when pushing to Scalingo or Heroku the build fails with the following error:

 ./src/index.jsx
       Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
       Referenced from:
       at Array.forEach (<anonymous>)
       at Array.reduceRight (<anonymous>)

I did not do anything to customize deployment, just pushed to production.

Here is the full deployment log :

Enumerating objects: 74, done.
Counting objects: 100% (74/74), done.
Delta compression using up to 4 threads
Compressing objects: 100% (68/68), done.
Writing objects: 100% (74/74), 185.95 KiB | 4.77 MiB/s, done.
Total 74 (delta 20), reused 15 (delta 0)
 <-- Start deployment of xxx-app-staging -->
       Fetching source code
-----> Creating runtime environment
        
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)
        
       Resolving node version 8.x...
       Downloading and installing node 8.15.0...
       Using default npm version: 6.4.1
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.14.0)...
       Installed yarn 1.14.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.14.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.4: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
       info fsevents@1.2.7: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > eslint-plugin-react@7.12.4" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
       warning "react-scripts > pnp-webpack-plugin > ts-pnp@1.0.0" has unmet peer dependency "typescript@*".
       warning " > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
       warning "eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
       warning " > eslint-plugin-import@2.16.0" has unmet peer dependency "eslint@2.x - 5.x".
       warning " > eslint-plugin-jsx-a11y@6.2.1" has unmet peer dependency "eslint@^3 || ^4 || ^5".
       [4/4] Building fresh packages...
       Done in 12.22s.
       Running build (yarn)
       yarn run v1.14.0
       $ react-scripts build
       Creating an optimized production build...
       Failed to compile.
        
       ./src/index.jsx
       Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
       Referenced from:
       at Array.forEach (<anonymous>)
       at Array.reduceRight (<anonymous>)
        
        
error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed
        
       We're sorry this build is failing!
        
       Some possible problems:
        
       - A module may be missing from 'dependencies' in package.json
       http://doc.scalingo.com/languages/javascript/nodejs#ensure-youre-tracking-all-your-dependencies
        
       - This module may be specified in 'devDependencies' instead of 'dependencies'
       http://doc.scalingo.com/languages/javascript/nodejs#install-devdependencies
        
       Keep coding,
       Scalingo
        
 !     An error occured during buildpack compilation
 !   Error deploying the application
 !   → Invalid return code from buildpack

And here is my package.json:

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@sentry/browser": "^4.5.4",
    "prop-types": "^15.7.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^6.0.0",
    "react-redux-i18n": "^1.9.3",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4"
  }
}

I can't understand why would I have any usage of eslint and its plugins in my production code, and how to fix this. Can you help?

https://github.com/facebook/create-react-app/issues/6391 it's posted 3 days ago and there one said it should actually work. maybe it's related to your case — skyboyer, Feb 13 '19 at 21:23
@skyboyer: Thanks for the link, I found the solution to my problem in the comments there: it was as easy as deleting `node_modules` and running `npm i` — Marius B, Jul 09 '19 at 12:55
Perhaps you can share the import section of `/src/index.jsx`, the error suggest that there is an import here that can't be found. Maybe the import shouldn't be there in the first place, but it looks to me like what you've done is correct. — Akinjiola Toni, Jan 16 '20 at 02:52

adesurirey · Accepted Answer · 2021-03-18T20:27:51.830

9

The problem was adding devDependencies which are not installed in production. Overriding eslint config is ok but all needed packages has to be added to the main dependencies.

edited Mar 18 '21 at 20:27

answered Feb 13 '19 at 21:18

adesurirey

2,549
2
16
36

8

This can't be the answer because I have successfully added eslint configurations to cra apps before with no problem. Plus, it worked fine for me in dev, only when I tried to push to heroku did I see the error. I solved this by moving all the devDependencies into regular dependencies, but there has to be another way. – adam tropp Mar 28 '19 at 00:58
Yes that was also working for me in dev. But you're right about `devDependencies` which was the real issue in production. I updated the answer, thanks for your comment @adam troop. Let me know if you find an other solution. – adesurirey Mar 28 '19 at 08:26
I'd love to read up on why CRA doesn't want you to add dev dependencies @adesurirey if you remember where you read that? It did not solve the problem for me. – GreeneCreations May 22 '19 at 19:38

score 3 · Answer 2 · answered Aug 11 '19 at 17:54

Removing this line from package.json worked for me:

"eslintConfig": {
    "extends": "react-app"
}

I have prettier set up on my visual studio code. I think the issue arises because of the eslint config conflicts with prettier. There's also another option which I have not tried which is installing eslint-config-prettier. Here are the documentation on it: Integration Prettier with linters

score 0 · Answer 3 · answered Jun 22 '19 at 15:56

0

Move all your Devdependencies to dependencies and delete the Devdependencies

Solved the problem for me

answered Jun 22 '19 at 15:56

BaharaJr

55
2
6

score 0 · Answer 4 · answered Aug 28 '19 at 03:04

0

For some reason removing this from my CRA package.json worked for me in VS Code:

"babel": {
    "presets": [
      "react-app"
    ]
  }

answered Aug 28 '19 at 03:04

Jon B

2,444
2
18
19

score 0 · Answer 5 · answered Feb 04 '21 at 06:17

Step 3 from this tutorial worked for me:

https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08

Creating an Express JS server in the root folder to serve the production build

//server.js
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

Installing dependencies:

npm install express express-favicon path

Then changing the "start" script in package.json to

"start": "node server.js"

Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' when deploying a create-react-app

5 Answers5