On the fly publicPath when lazy-loading using @loadable/component?

We have configured publicPath in ChunkExtractor, so it can be set dynamically/on the fly when deployed.

This works for the initial bundles, publicPath set to /pro/public E.g. the paths look like this

https://local.moz.com/pro/public/bundle~._client_components_t.js

However it doesn’t work for us when using lazy-loading via @loadable/component:

const SelectReport = loadable(() => import('components/page-optimization/select-report'));

It will not use publicPath defined for ChunkExtractor:

https://local.moz.com/pro/research/components-page-optimization-select-report~._client_components_page-optimization_se.js

If we define output.publicPath for webpack, this works in local dev. However we do rely on the ‘on the fly’ configuration to configure the paths for use with a CDN when deployed to prod.

How do I make sure @loadable/component uses the publicPath defined for the chunk extractor?

This is how we use ChunkExtractor:

const getPublicPath = exports.getPublicPath = () => {
  if (yn(process.env.WEBPACK_DEV_MODE)) {
    return constants.SERVER.WEBPACK_PUBLIC_PATH;
  }

  const { ASSETS_PATH, CDN } = process.env;
  return CDN ? `${CDN}${ASSETS_PATH}` : ASSETS_PATH;
};

exports.getBundleElements = (bundle) => {
  const extractor = new ChunkExtractor({
    entrypoints: [bundle],
    publicPath: getPublicPath(),
    statsFile: STATS_FILE,
  });

  return {
    scripts: extractor.getScriptElements(),
    styles: extractor.getStyleElements(),
  };
};

I’ve been looking at the source code for @loadable/component, but I can’t figure out how it resolves paths.

[theKashey]

Yeah 😅, a couple of small details, small enough to be hardly noticeable and hardly fixable. Probably we should not document “Server” and “Client” parts separately, but explain how one configuration is matching another.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.