react_component console errors with multiple packs on a page

[ratneshraval]

Steps to reproduce

Trying to use react_component where a page has 2 pack tags loaded.

example .html.erb file

<div id='inside-comp'>
  <%= javascript_pack_tag 'application' %>
  <%= javascript_pack_tag 'outside' %>
  <%= react_component("InsideComp", { greeting: "Hello" }, {prerender: false}) %>
</div>

Resulting error

1. fromRequireContextWithGlobalFallback.js:19 Error: Cannot find module './InsideComp'.
    at webpackContextResolve (.*$:14)
    at webpackContext (.*$:9)
    at fromRequireContext.js:13
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:13)
    at Object.mountComponents (index.js:85)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js:132)
2. ReferenceError: InsideComp is not defined
    at eval (eval at module.exports (fromGlobal.js:13), <anonymous>:1:1)
    at module.exports (fromGlobal.js:13)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:17)
    at Object.mountComponents (index.js:85)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js:132)
3. index.js:95 Uncaught Error: Cannot find component: 'InsideComp'. Make sure your component is available to render.
    at Object.mountComponents (index.js:95)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js:132)

Expected behavior

Component loads and no console errors

Actual behavior

Component loads correctly but you still get 3 console errors.

System configuration

Sprockets or Webpacker version: 3.2
React-Rails version: 2.4.2
Rect_UJS version: 2.4.2
Rails version: 5.1.2
Ruby version: 2.4.2

---

1. Sample repo: https://github.com/ratneshraval/react-rails-webpacker-test
2. Repo readme tells you 3 commands to run
3. Visit /insidecomp and /outsidecomp
4. Check console log.

[ttanimichi]

👀

[dtom90]

I believe this may be because you are creating two different ReactRailsUJS variables with two different directory contexts to load components:

• https://github.com/ratneshraval/react-rails-webpacker-test/blob/master/app/javascript/packs/application.js#L13
• https://github.com/ratneshraval/react-rails-webpacker-test/blob/master/app/javascript/packs/outside.js#L5

Thus at least one of them will not be able to find the component that is being referenced.

Removing the unneeded pack tag from each view resolves the console error issue:
dtom90/react-rails-webpacker-test@192e65c

Of course, this may not be the solution you're looking for, but I would say to just make sure that all the components you reference are included in the directory tree of the single context you use.

[BookOfGreg]

Nice work and thanks @dtom90 👍

Wonder if in an application with multiple packs, the ReactRailsUJS should be code-split out into a global pack, and then component packs could be loaded independently on each page. That should stop any double ReactRailsUJS loads and allow component blobs at will.

If so then there's an easy PR for someone to add to the Readme, or to add to the Wiki.

[ratneshraval]

@dtom90 Thank you for looking into this.

The reason I have 2 packs and 2 contexts, is to keep individual packs size smaller and only contain relevant imports. Hence I have 2 packs

1. component pack with app/javascript/components directory context
2. otherComp pack with app/javascript/otherComps directory context.
   Now I have a page where both are needed, hence both are there, resulting in this error.

How can I achieve this?
If I combine all into 1 directory context, the resulting pack will contain everything and defeat modular bundling purpose of webpack.

[noisyscanner]

@ratneshraval did you ever solve this?

[ratneshraval]

@noisyscanner I was not able to solve so I stopped using this.

[noisyscanner]

That sucks :/ I think we are going to have to do the same - just use ReactDOM.render unless we need SSR

[ratneshraval]

I ended converting all pages to CSR (webpacker + react router and componentMount to fetch props)
This also made on-boarding easier for devs who came from other React (non-rails) background.

[BookOfGreg]

Basically ReactUJS will try auto-mount, you could have just wrote your own mounter JS rather than scrapped it entirely, or used standard webpack split chunks.

If someone wants to add a feature to ReactUJS to detect other instances of itself that would be helpful.

[tim-millar]

@ratneshraval can you give an example of your approach? we are trying to split our JS bundle and are running into the same problem (rendering client-side)

[ratneshraval]

@tim-millar I don't have a simple example repository to share right now.
If you have a single page app then you can use split chunks like @BookOfGreg suggested.
I used rails routes with react-router to create multiple-SPA architecture where each miniSPA will load the relevant pack.
Hope this makes sense, if not then I'll try to create some sample repo.

[tim-millar]

@ratneshraval We have more of a multi-SPA using react-router approach. What we'd like to do is have some components in a pack which is loaded in the application.html (i.e., on every page, like the navigation), and other components which will be loaded on a case-by-case basis in the view (e.g., a user's profile). This results in sometimes having two (or more) javascript_pack_tag calls on the same page, with the errors described in the OP. If there's a way round this which would allow us to split code using webpacker and continue to use the react_component helper, I'd love to know what it is!