diff --git a/CHANGELOG.md b/CHANGELOG.md index 9faa640b8..65105194a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,9 @@ Changes since last non-beta release. ### Removed - Removed a requirement for autoloaded pack files to be generated as part of CI or deployment separate from initial Shakapacker bundling. [PR 1545](https://github.com/shakacode/react_on_rails/pull/1545) by [judahmeek](https://github.com/judahmeek). +### Changed +- Throw error when attempting to redefine ReactOnRails. [PR 1562](https://github.com/shakacode/react_on_rails/pull/1562) by [rubenochiavone](https://github.com/rubenochiavone). + ### [13.3.5] - 2022-05-31 #### Fixed - Fixed race condition where a react component could attempt to initialize before it had been registered. [PR 1540](https://github.com/shakacode/react_on_rails/pull/1540) by [judahmeek](https://github.com/judahmeek). diff --git a/docs/javascript/troubleshooting-when-using-shakapacker.md b/docs/javascript/troubleshooting-when-using-shakapacker.md new file mode 100644 index 000000000..5925f76c2 --- /dev/null +++ b/docs/javascript/troubleshooting-when-using-shakapacker.md @@ -0,0 +1,77 @@ +# Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple` + +## Context + +1. Ruby version: 3.1 +2. Rails version: 7.0.6 +3. Shakapacker version: 6.6.0 +4. React on Rails version: 13.3.5 + +## The failure + +Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash with the following error: + +``` +Could not find component registered with name XXX. Registered component names include [ YYY ]. Maybe you forgot to register the component? +``` + +``` +VM4859 clientStartup.js:132 Uncaught Error: ReactOnRails encountered an error while rendering component: XXX. See above error message. + at Object.get (ComponentRegistry.js:40:15) + at Object.getComponent (ReactOnRails.js:211:44) + at render (VM4859 clientStartup.js:103:53) + at forEachReactOnRailsComponentRender (VM4859 clientStartup.js:138:9) + at reactOnRailsPageLoaded (VM4859 clientStartup.js:164:5) + at renderInit (VM4859 clientStartup.js:205:9) + at onPageReady (VM4859 clientStartup.js:234:9) + at HTMLDocument.onReadyStateChange (VM4859 clientStartup.js:238:13) +``` + +## Configs + +### Webpack configuration + +```js +optimization: { + runtimeChunk: 'multiple' +}, +``` + +### Rails view + +```haml += react_component("XXX", props: @props) += yield += react_component("YYY", props: @props) +``` + +## The problem + +Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash. + +Read more at https://github.com/shakacode/react_on_rails/issues/1558. + +## Solution + +To overcome this issue, we could use [shakapacker](https://github.com/shakacode/shakapacker)'s default optimization configuration (pseudo-code): + +```js +const { webpackConfig: baseClientWebpackConfig } = require('shakapacker'); + +// ... + +config.optimization = baseClientWebpackConfig.optimization; +``` +As it set the `optimization.runtimeChunk` to `single`. See its source: + +`package/environments/base.js:115` +```js + optimization: { + splitChunks: { chunks: 'all' }, + + runtimeChunk: 'single' + }, +``` +https://github.com/shakacode/shakapacker/blob/cdf32835d3e0949952b8b4b53063807f714f9b24/package/environments/base.js#L115-L119 + +Or set `optimization.runtimeChunk` to `single` directly. diff --git a/node_package/src/ReactOnRails.ts b/node_package/src/ReactOnRails.ts index 3aeb100f8..cee7aa347 100644 --- a/node_package/src/ReactOnRails.ts +++ b/node_package/src/ReactOnRails.ts @@ -30,6 +30,16 @@ if (ctx === undefined) { throw new Error("The context (usually Window or NodeJS's Global) is undefined."); } +if (ctx.ReactOnRails !== undefined) { + throw new Error(` + The ReactOnRails value exists in the ${ctx} scope, it may not be safe to overwrite it. + + This could be caused by setting Webpack's optimization.runtimeChunk to "true" or "multiple," rather than "single." Check your Webpack configuration. + + Read more at https://github.com/shakacode/react_on_rails/issues/1558. + `); +} + const DEFAULT_OPTIONS = { traceTurbolinks: false, turbo: false,