Loading chunk error when importing conditional JS files to app.js - yarn build

sage
,
5

So I just noticed in the budj.s blog here that setPublicPath is deprecated when using Sage. Searched around on here a bit more and found this post that gives a couple options.

I think option #2 is cleaner and would do something like this, note the following is untested

bud.config.js

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = (app) => {
  app
    .define({
     // Uses webpack define under the hood, https://webpack.js.org/plugins/define-plugin/
      PUBLIC_PATH: JSON.stringify('/wp-content/themes/<theme name>/public'),
    })

and then in a script that you can import anywhere you need to use dynamic imports

resources/scripts/public-path.js

// Required for lazy-loading with Webpack.
__webpack_public_path__ = PUBLIC_PATH;

resources/scripts/app.js

import {domReady} from '@roots/sage/client';
import './public-path.js'

const loadCartIndicatorModule = async () =>
  await import(
    /* webpackPrefetch: true */
    /* webpackChunkName: "app-cart-indicator" */
    './app/cart-indicator'
  ).then(({default: module}) => module);

const main = (error) => {
  if (error) {
    console.error(error);
  }

  if(document.querySelector('.has-cart') {
     loadCartIndicatorModule().then((cartModule) => {
        ...
     });
  }
  ...
}

domReady(main);