MERN - heroku-postbuild - client dependencies error (create-react-app)

Error (while runing heroku-postbuild script)

Creating an optimized production build...
       Failed to compile.`
       
       ./src/index.js
       Error: Cannot find module 'eslint'
       Referenced from:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-shop-app-client@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1

Hi guys,
I have a problem while building my React (MERN) app with Heroku.

"npm install" works in server’s and in client (create-react-app) directory with no issues and everything is great. “npm build” command works great in client (create-react-app) directory as well.

The problem is when i want to deploy my App to Heroku and I use heroku-postbuild script. Then I get an error about “eslint” dependency". I’ve found a solution for this by just adding “eslint” as a devDependency to my client package.json. This makes my heroku-postbuild script work well.

Unfortunately, then when I want to run my app at localhost, I get and an error about eslint version because I shouldn’t change create-react-app default packages versions, so I’am a little confused how to really solve this problem.

My package.json scripts:

  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },

Link to the repository I have problem with —> LINK is HERE

Does anyone have any solution for it?

{
  "scripts": {
    "postinstall": "npm --prefix client install",
    "build": "npm --prefix client run build",
    "start": "node index.js",
  }
}

When deployed to heroku it runs npm install. Because of this the postinstall script is triggered to install the dependancies for create-react-app

Second it will run the build script which will build the client,

last it runs npm start

I suspect that neither the postinstall step, nor the build steps are happening when you deploy with your current root package.json

Sorry, I forgot to include latest version of my package.json. I’ve just updated “scripts” part. If you could give it a look now I would be greatful.

So took me a little while, but test deployed the app, and submited a pull request. You can see the test deployment here https://jnmorse-react-shop.herokuapp.com/

1 Like

Thanks a lot man!. But have you tried to run it locally?

npm run dev for example.

The app is loading at localhost:3000 with error:

./src/index.js
Error: ESLint configuration in BaseConfig » /Users/michaldz/Documents/Projects/react-shop-app/client/node_modules/eslint-config-react-app/index.js is invalid:
	- Property "overrides" is the wrong type (expected array but got `{"files":["**/*.ts","**/*.tsx"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},"warnOnUnsupportedTypeScriptVersion":true},"plugins":["@typescript-eslint"],"rules":{"default-case":"off","no-dupe-class-members":"off","@typescript-eslint/no-angle-bracket-type-assertion":"warn","no-array-constructor":"off","@typescript-eslint/no-array-constructor":"warn","@typescript-eslint/no-namespace":"error","no-unused-vars":"off","@typescript-eslint/no-unused-vars":["warn",{"args":"none","ignoreRestSiblings":true}],"no-useless-constructor":"off","@typescript-eslint/no-useless-constructor":"warn"}}`).

Referenced from: BaseConfig
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)

I did run it locally, and it worked fine for me. The error message you posted though

looks a lot like the one I got when I tried to add react-app to the extends in the .eslintrc file, which I don’t see as including in the pull request.

I suspect this is do to a incompatablity to way react-app has its eslint setup, and the latest eslint@6.0.1