- Getting warning for
Can't resolve 'react-dom/client'in React < 18 - Undefined Set
- Using TheRubyRacer
- HMR
- Tests in component directory
You may see a warning like this when building a Webpack bundle using any version of React below 18. This warning can be safely suppressed in your Webpack configuration. The following is an example of this suppression in config/webpack/webpack.config.js:
- const { webpackConfig } = require('shakapacker')
+ const { webpackConfig, merge } = require('shakapacker')
+const ignoreWarningsConfig = {
+ ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
+};
- module.exports = webpackConfig
+ module.exports = merge({}, webpackConfig, ignoreWarningsConfig)ExecJS::ProgramError (identifier 'Set' undefined):
(execjs):1
If you see any variation of this issue, see Using TheRubyRacer
TheRubyRacer hasn't updated LibV8 (The library that powers Node.js) from v3 in 2 years, any new features are unlikely to work.
LibV8 itself is already beyond version 7 therefore many serverside issues are caused by old JS engines and fixed by using an up to date one such as MiniRacer or TheRubyRhino on JRuby.
Check out Enabling Hot Module Replacement (HMR) in Shakapacker documentation.
One caveat is that currently you cannot Server-Side Render along with HMR.
If your tests for react components reside alongside the component files in the app/javascript/components directory,
you will get ModuleNotFoundError in production environment
since test libraries are devDependencies.
To resolve this issue,
you need to specify a matching pattern in appllication.js and server_rendering.js.
For example, see the below code:
// app/javascript/packs/application.js
const componentRequireContext = require.context('react_rails_components', true, /^(?!.*\.test)^\.\/.*$/)
const ReactRailsUJS = require('react_ujs')
ReactRailsUJS.useContext(componentRequireContext)