Loading js chunks dynamically / conditionally

[dzen]

Hello, new to Hubspot CMS. I'm looking for a way to dynamically load webpack chunks. My current use case is loading analytics code only if the user accepts tracking.

The chunks are placed in the correct directory and uploaded to Hubspot CMS. I can see them in the /design-manager, but when checking their dependands it says they are not in use anywhere on the site.

After accepting tracking the browser will attempt to load the chunk, the URL structure looks correct, but it returns 404 (in browser and with curl).

The exact message displayed in the browser is:

{"message":"File not found 1","status":403}

If I require (require_js tag) the chunk from a component or template it will load, but there are two issues with this approach:

- I have to hard code the chunk name, which is generated by webpack

- the chunk will load as soon as the componenent or template is loaded, no conditional load

If I remove the require tag, the chunk is still available on the same URL, but the browser will try to load it from a different one and fail.

Chunk still here:

https://f.hubspotusercontent-eu1.net/hub/25022935/hub_generated/template_assets/43436612544/1631095838671/conway-starter-theme/js/chunk.358.63876d94.js

Browsers tries to load (IDs are different):

http://f.hubspotusercontent-eu1.net/hub/25022935/hub_generated/template_assets/43404387260/1631096413467/conway-starter-theme/js/chunk.358.63876d94.js

Any help is greatly appreciated, thanks!

[SG89]

Hi...is there any solution found for this one? I am facing a similar issue with react.

[Teun]

Hi @dzen , 

What is it that you are trying to achieve? You can set a few parameters in your require_js tag as described in the docs.
You can pass it a string as a second parameter to indicate if you want to load it in the head or in the footer, and you can also pass it a parameter to tell the function if it should load the scrypt async or defer the script:

{{ require_js("http://example.com/path/to/footer-file.js", "footer") }}
{{ require_js("http://example.com/path/to/head-file.js", "head") }}

<!-- you can add async or defer attributes to the tags that are added. -->
{{ require_js(get_asset_url('./path/to/file.js'), { position: 'footer', async: true }) }}
{{ require_js(get_asset_url('./jquery-latest.js'), { position: 'footer', defer:true }) }}

[dzen]

Hi @Teun , thank you for the quick reply.

I'd like to load custom "analytics.js" only if the user accepts tracking. If I include "analytics.js" in any way using the require_js tag it will always load, regardless of UI interactions.

If I don't require "analytics.js" and initiate the dynamic script load by accepting tracking the URL to "analytics.js" will be incorrect and it fails to load.

Additionally, "analytics.js" code is processed by webpack into a chunk with a random ID and hash (chunk.358.63876d94.js). I can't rely on hard coding this in the template to get it to load because the file name will be different when deployed from another machine.