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

**URL:** https://discourse.roots.io/t/loading-chunk-error-when-importing-conditional-js-files-to-app-js-yarn-build/22938
**Category:** sage
**Tags:** bud, sage10
**Created:** 2022-04-21T06:39:23Z
**Posts:** 7
**Showing post:** 5 of 7

## Post 5 by @zzzap — 2022-04-25T15:33:59Z

So I just noticed in the [budj.s blog here](https://bud.js.org/blog/5.2.0) that **setPublicPath** is deprecated when using Sage. Searched around on here a bit more and found [this post](https://discourse.roots.io/t/automatic-publicpath-is-not-supported-in-this-browser/22619/11) 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);
```

---

_[View the full topic](https://discourse.roots.io/t/loading-chunk-error-when-importing-conditional-js-files-to-app-js-yarn-build/22938)._