Cannot find module '@babel/preset-react'

Question

I was trying to deploy my reactjs rails app on heroku.

Everything seems okay until I get this error:

Module build failed (from ./node_modules/babel-loader/lib/index.js): remote: Error: Cannot find module '@babel/preset-react'

The app works fine in my localhost. I tried deleting my node_modules folder then running npm install but the error persisted(only when deploying at heroku).

My package.json:

{ "name": "App", "private": true, "dependencies": { "@rails/webpacker": "5.4.0", "@types/react": "^17.0.18", "@types/react-dom": "^17.0.9", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react_ujs": "^2.6.1", "webpack": "^4.46.0", "webpack-cli": "^3.3.12" }, "devDependencies": { "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.9", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "webpack-dev-server": "^3.11.2" } }

Kevin · Accepted Answer · 2021-09-12 12:22:27Z

I managed to deploy it. I based my answer here: Why is devDependencies' pruning skipped even if NPM_CONFIG_PRODUCTION is true?

What I did was set:

NPM_CONFIG_PRODUCTION= false YARN_PRODUCTION = false YARN_CONFIG_PRODUCTION = false

I tested changing ENV values and this what worked for me.

This can set at heroku settings under config vars

potatoxchip · Accepted Answer · 2021-09-07 12:12:59Z

Heroku defaults to NODE_END=production. How does this affect your build?

You have @babel/preset-react in devDependencies. When you do npm i (or yarn) to install packages with NODE_ENV=production, npm (or yarn) only installs dependencies (it wont install devDependencies).

To get around this, you can -

either override NODE_ENV. ($ NODE_ENV=development npm i)
Run npm i --only=dev before you build

To be on the safe side, revert the value on NODE_ENV to production when you run in production environment (Heroku in your case).

Collectives™ on Stack Overflow

Cannot find module '@babel/preset-react'

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related