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?

Answer 1

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 .

Answer 2

Move all your Devdependencies to dependencies and delete the Devdependencies

Solved the problem for me

Answer 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

Answer 4

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

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

Answer 5

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"