Guides
Rails
Javascript
Additional details
Deployment
React on rails pro
Api
Misc
Contributor info
Testimonials
Outdated
Shakacode logoShakaCodeDeveloped by

Copyright 2020 ShakaCode

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

optimization: {
  runtimeChunk: 'multiple'
},

Rails view

= 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's default optimization configuration (pseudo-code):

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

  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.