How to properly load multiple react components in HTML views with beta 7

[GGrassiant]

Hi!

I am working on an existing app that used to be mostly HTML views with a bit of JQuery logic to interact with controllers in some places. We recently started implementing some React components in TypeScript to replace the JQuery logic.

I am trying to wrap my head around how to best handle loading components and how not to interfere with other JavaScript libraries in the project (for example Amplitude tracking system).

The first try was successful. We had the controller return a specific layout that would load the parent component, which basically was the entire page and would then render child components.

The subsequent tries are a bit harder: we have more nimble components that we would like to render within HTML views. Those views render normal HTML content, in the main application layout, but in some places we would like to inject a React component by attaching it to a specific HTML element.

For each group of React components, we have a specific entrypoint in javascript/pack.

We initially tried loading them with javascript_pack_tag but the entrypoint/components would not load. We then tried with javascript_packs_with_chunks_tag. The component would load but no re-render on state change would work and we understood that was because the javascript file for the tracking solution, Amplitude, was being loaded in the general layout with javascript_packs_with_chunks_tag. Hence the issue was having multiple javascript_packs_with_chunks_tag.

As a workaround, we now load every entry point in the same tag within the header, e.g. <%= javascript_packs_with_chunks_tag 'tracking', 'carts', 'other-entrypoints %> but we think this might cause performance issues and other but by overloading content.

What would be the best approach to this problem of mixing normal HTML with nimble React components + other JavaScript scripts?

We are running

• Rails 6.0.3
• Ruby 2.7.1
• Node 14.16.0
• Yarn 1.22.5
• Webpacker 6.0.0.beta.7

As a side note, to make Webpacker 6.0.0.beta.7 work and avoid issues with merge for example, we manually changed the yarn.lock file to make sure it loads the right version and adjusted the integrity accordingly. The yarn install would load pre-2 as the version.

[jamesst20]

In simpler words, would it be possible to make the behavior of

(Scenario 1)
<%= javascript_packs_with_chunks_tag 'entrypoint_1' %>
<%= javascript_packs_with_chunks_tag 'entrypoint_2' %>

the same as

(Scenario 2)
<%= javascript_packs_with_chunks_tag 'entrypoint_1', 'entrypoint_2' %>

Exemple:

Let's say entrypoint_2 loads a React application.

Scenario 1: React app loads, state change don't work (no refresh)
Scenario 2: React app loads, state change works

[mcmire]

One thing just so it doesn't confuse other people looking at this, if you are using the beta you should no longer need to use javascript_packs_with_chunks_tag as per the instructions in the upgrade doc — the regular *_pack_tag use chunks by default. If you've already switched to using this that's fine, but I wanted to get that out of the way.

As for the specific issue you mention, where loading multiple entrypoints in the same layout file using separate javascript_pack_tag calls causes problems at runtime, that is a known issue. What's happening (as far as I understand) is that a copy of the Webpack initialization code is loaded for each call to javascript_pack_tag. So combining them into one call is definitely the right move here regardless of what JS library you're using. It doesn't appear that anyone has come up with a solution for this, so until that happens, you'll probably want to keep doing this.

[mcmire]

By the way:

As a side note, to make Webpacker 6.0.0.beta.7 work and avoid issues with merge for example, we manually changed the yarn.lock file to make sure it loads the right version and adjusted the integrity accordingly. The yarn install would load pre-2 as the version.

I would advise against changing yarn.lock directly. That would be like updating Gemfile.lock directly. Your yarn.lock will get changed the next time package.json is updated, so your changes may get blown away. Instead if you want Yarn to choose the right version of Webpacker, add a version to package.json:

"@rails/webpacker": "6.0.0.beta-7"

[GGrassiant]

So combining them into one call is definitely the right move here regardless of what JS library you're using. It doesn't appear that anyone has come up with a solution for this, so until that happens, you'll probably want to keep doing this.

Thanks a lot for the feedback! We will continue like this and adjust if another solution comes up.
And also, thanks for the heads up on the yarn.lock file.