Multiple javascript_pack_tag calls for different packs in one template hierarchy

[bubuluxWork]

Hey there,

I am facing an issue with the way different packs can be used in one template hierarchy. It looks like it's not okay to include two different packs within the same template (or make another call in a lower level of the template hierarchy).

Let's say I have this directory tree inside app/javascript, assuming packs is the default, so: app/javascript/packs

• fooDir
• • • • FooComponent
• barDir
• • • • BarComponent

lets say, I define two packs:

// foo.js
const ReactRailsUJS = require("react_ujs");

const context = require.context("fooDir", true);

ReactRailsUJS.useContext(context);


// bar.js
const ReactRailsUJS = require("react_ujs");

const context = require.context("barDir", true);

ReactRailsUJS.useContext(context);

Now In a template file (in my case .slim), I assumed, that shipping two packs like this, was possible:

= javascript_pack_tag 'fooDir'
= javascript_pack_tag 'barDir'

/ and I can now call all sorts of components, like:

 = react_component('barDir/FooComponent')
 = react_component('fooDir/BarComponent')

But this wont work, because for two reasons:

A) rails is complaining:

To prevent duplicated chunks on the page, you should call javascript_pack_tag only once on the page. Please refer to https://github.com/shakacode/shakapacker/blob/main/README.md#view-helpers-javascript_pack_tag-and-stylesheet_pack_tag for the usage guide

And B) the Namespace is wrong:

/ when saying: 
= javascript_pack_tag 'fooDir'
/ the namespace becomes: fooDir/* 
/ so calling

= react_component('FooComponent')
/ is pointing to app/javascript/fooDir/FooComponent

And this is essentially where my problem is, the way the namespaces are constructed, is not making it possible for me to use more than one pack, which in turn would enable me to be very granular in bundle splits. That's at least my understanding...

I did refer to the docs (I probably read these several times at this point), and from what I understood, I can just make one call with two packs as args (at least that's what I saw in a place in my codebase):

= javascript_pack_tag 'fooDir', 'barDir'

 = react_component('FooComponent')
 = react_component('BarComponent')

But this will not work, because the last pack in the call will set the namespace (barDir) so FooComponent cannot be found. Which will also lead to an error...

In short, I need a way to make these kinds of splits, but I cannot afford to remove packs, like for example only to use fooDir. I have to work with the fact, that upwards in the template hierarchy is lots of legacy code both from sprockets and react code, that just won't go away any time soon.

I know that in theory, I could just move all of the code into either fooDir or barDir, and call it a day. But a much much more preferred choice would be to have two namespaces, so this is possible:

= javascript_pack_tag 'fooDir', 'barDir'
/ creates fooDir and barDir namespace

/ using namespaces to point to components
 = react_component('fooDir/FooComponent')
 = react_component('barDir/BarComponent')

Or at least some hackery way of achieving this... Is this possible?

[Judahmeek]

Moving the files into a single directory is definitely the easiest solution.