React.Lazy -- Webpack -- publicPath

[YeonV]

For Client-Side-Render-Optimation one can use React.lazy:

somehow all assets (js & css) gets the correct path set, but only the lazy-loaded onces are trying to resolve a wrong path.
To fix this, it requires the output.publicPath to be set in the webpack.config (in addition to output.path).

Sadly I cannot provide the correct path since they are all in hub_generated/template_assets
How did you resolve the correct paths for the assets?
Could you add the support for React.lazy?

Thank you very much

[sweber83]

We also have this exact problem.
The main problem is, that files uploaded via the cli don't end up in the same folder.
The URLs contain ids, of which it's not clear how they are determined.
I think they are somehow related to the content of the files or the last time the file content changed.
But fact is, that this behaviour is not compatible with how webpack does code splitting.
Webpack expects all chunks to reside in the output.publicPath folder.
Example Hubspot CDN URL: http://cdn2.hubspot.net/hub/HUB_ID/hub_generated/template_assets/ID_1/ID_2/UPLOAD_PATH/FILENAME
if we go ahead and set publicPath to a section of a CDN URL, obtained from the get_asset_url() hubl function, it does not work, because we can't be sure that ID_1 and ID_2 are the same for all chunks.

[gcorne]

Sorry for the delay replying to either of these issues and thank you for the feedback. We are aware of some limitations of using webpack with HubSpot and are working to make some improvements. The two main issues are:

1. JavaScript files when uploaded to the HubSpot developer file system (aka the Design Manager) are actually JavaScript + HubL files that are interpreted as HubL before being published to the CDN. The URLs on the CDN for these files are also not structured in a way that relative paths or a common base path can be used, which impacts code splitting and source maps. We're actively working on a solution here that we hope to be available for BETA testing soon.

2. We don't have a simple way for incorporating a "manifest" into the HTML response to support code splitting. I think that this will require a webpack plugin that can output HTML+HubL files that include webpack information like is available for other server-rendered frameworks. We haven't started doing any work on this.

cc @williamspiro

[flmuel]

Would be great, if this beta launches quickly and could be used for current HubSpot Challenge!

[williamspiro]

For anyone interested in participating in early beta functionality around point 1 above, where JavaScript files have a predictable path based reference, feel free to DM me in the Developer Slack!

[qonl]

JavaScript files when uploaded to the HubSpot developer file system (aka the Design Manager) are actually JavaScript + HubL files that are interpreted as HubL before being published to the CDN.

@gcorne Would this also be the reason that the HubspotAutoUploadPlugin would be parsing expression delimiters {{ }} in the bundled main.js file as HubL and throwing an error? Happy to open a separate issue about my problem specifically with more details if needed.

[gcorne]

@gcorne Would this also be the reason that the HubspotAutoUploadPlugin would be parsing expression delimiters {{ }} in the bundled main.js file as HubL and throwing an error? Happy to open a separate issue about my problem specifically with more details if needed.

Yeah, I think so.

[qonl]

Got it. Looking forward to hearing about a solution for this soon, for the time being I have manually modified the node_modules to remove those comments, as it was the only thing that seemed to resolve the issue. Thanks for the quick response.

[stevekanter]

While we're not building our theme using react / this boilerplate, I have a theme that has multiple vendor modules and I'd love to be able to use webpack code splitting without requiring any fancy business, but the unknown base URLs make it really challenging. I haven't yet figured out a solution for my situation, yet, but yeah.