Installing react on rails in project #1424

demo360o2 · 2022-01-19T20:24:31Z

demo360o2
Jan 19, 2022

Ruby version 3.0.3
Rails version 6.1.4
react_on_rails version 12.5.0
nodejs 17.3.0

Hi I'm installing react on rails in a running project. When all is done I got a merge issue when running

foreman start -f Procfile.dev

15:06:54 wp-client.1 | const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
15:06:54 wp-client.1 | ^
15:06:54 wp-client.1 |
15:06:54 wp-client.1 | TypeError: merge is not a function

here is my package.json file:

{
"dependencies": {
"@babel/core": "^7.16.10",
"@babel/plugin-transform-runtime": "^7.16.10",
"@babel/preset-env": "^7.16.10",
"@babel/preset-react": "^7.16.7",
"@babel/runtime": "^7.16.7",
"@rails/webpacker": "5.4.3",
"babel-loader": "^8.2.3",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"compression-webpack-plugin": "^9.2.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"global": "^4.4.0",
"mini-css-extract-plugin": "^2.5.2",
"pnp-webpack-plugin": "^1.7.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-on-rails": "12.5.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.0",
"webpack": "^4.46.0",
"webpack-assets-manifest": "^5.1.0",
"webpack-cli": "^3.3.12",
"webpack-merge": "^5.8.0"
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
"react-refresh": "^0.11.0",
"webpack-dev-server": "^3"
}
}

The webpack version of 5.8.0 match the syntax in the error line, but I'm a bit surprised by the web pack version of 4.46.0, I don't know why, but I was expecting a 5.X version for this package.

I have found those lines in the execution of bundle exec rails webpacker:install

Installing webpack and webpack-cli as direct dependencies
run yarn add webpack@^4.46.0 webpack-cli@^3.3.12 from "."

What is wrong with my setup?