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 [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > [email protected]" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
       warning "react-scripts > pnp-webpack-plugin > [email protected]" has unmet peer dependency "typescript@*".
       warning " > [email protected]" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
       warning "eslint-config-airbnb > [email protected]" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
       warning " > [email protected]" has unmet peer dependency "[email protected] - 5.x".
       warning " > [email protected]" 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?

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
– skyboyer, Commented Feb 13, 2019 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
– Marius B, Commented Jul 9, 2019 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
– Akinjiola Toni, Commented Jan 16, 2020 at 2:52

adesurirey · Accepted Answer · 2021-03-18 20:27:51Z

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, 2021 at 20:27

answered Feb 13, 2019 at 21:18

adesurirey

2,6202 gold badges20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

adam tropp Over a year ago

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.

adesurirey Over a year ago

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.

GreeneCreations Over a year ago

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.

khwilo · Accepted Answer · 2019-08-11 17:54:32Z

3

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

answered Aug 11, 2019 at 17:54

khwilo

5214 silver badges10 bronze badges

Comments

Jon B · Accepted Answer · 2019-08-28 03:04:48Z

0

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

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

answered Aug 28, 2019 at 3:04

Jon B

2,8842 gold badges20 silver badges20 bronze badges

Comments

pesinasiller · Accepted Answer · 2021-02-04 06:17:07Z

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"

BaharaJr · Accepted Answer · 2019-06-22 15:56:15Z

-2

Move all your Devdependencies to dependencies and delete the Devdependencies

Solved the problem for me

answered Jun 22, 2019 at 15:56

BaharaJr

712 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related