Cannot find module '#babel/preset-react' - reactjs

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"
}
}

Answer 1

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

Answer 2

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).