Hello,
I’m using bud in sage 10 and trying to dynamic imports some scripts in my resources. When I use yarn dev, I don’t encounter this type of error but when I try to use yarn build. The error shows in the chrome inspect and it says Automatic publicPath is not supported in this browser. But when I remove my dynamic imports from my script, the error disappears.
Hi @Jacek,
Sorry for the late reply.
Here is the code of my app.js:
/**
* External Dependencies
*/
import { domReady } from '@roots/sage/client';
/**
* Local Dependencies
*/
async function localImports() {
const myplugin = await import('./plugins.js');
myplugin.default();
}
// app.main
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
localImports();
};
domReady(main);
import.meta.webpackHot?.accept(main);
Here is the code of plugins.js:
export default function() {
console.log('This is default plugin');
}
Here is my bud.config.js configuration:
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app', '@styles/app'],
})
.provide({
jquery: ["jQuery", "$"],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets(['images', 'fonts'])
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('resources/views/**/*', 'app/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.proxy('http://sage-boiler.lndo.site')
/**
* Development URL
*/
.serve('http://localhost:3000');
};
I also got this error while trying to use TsParticles yesterday. I created a particles.js
import {tsParticles} from 'tsparticles';
import particlesoptions from './particlesConfig.json';
tsParticles.load('tsparticles', particlesoptions);
then pull it into my bud.config.js
particles: ['@scripts/particles'],
then enqueue in setup.php
add_action('wp_enqueue_scripts', function () {
bundle('particles')->enqueue();
}, 100);
I got the same error that broke all the JS “Uncaught Error: Automatic publicPath is not supported in this browser”
After doing some digging, I saw this happens with a few libraries so I tried setting my public path in bug.config.js like .setPublicPath(' ') this removed the error “publicPath is not supported” but threw other errors… that’s as far as I got. I needed up just moving on for the sake of time since this wasn’t necessary for me but curious how to solve this.
"Loading failed for the with source “http://powerassettech.local/vendor/null.cb1d9d.js”."
“Uncaught (in promise) ChunkLoadError: Loading chunk 642 failed.”
Note this only happens when I build but perfectly fine when running dev
Same error when adding .setPublicPath('') in bud.config.js. It shows (index):438 Uncaught (in promise) ChunkLoadError: Loading chunk 334 failed.
Hey @bbuilds I’ve checked this package to test and actually it works in my case without any issue.
This is how looks my app.js with it. I think your .json file with your custom options should be added after import tsparticles package, then init function into main function
something like this:
import { tsParticles } from "tsparticles";
import demoJson from './components/demoJson';
This is my test file all in one file
import { domReady } from '@roots/sage/client';
import { tsParticles } from "tsparticles";
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
// application code
tsParticles.load("tsparticles", {
background: {
color: "#000000"
},
particles: {
color: { value: "#fff" },
move: {
direction: "bottom",
enable: true,
outModes: "out",
speed: 2
},
number: {
density: {
enable: true,
area: 800
},
value: 400
},
opacity: {
value: 0.7
},
shape: {
type: "circle"
},
size: {
value: 10
},
wobble: {
enable: true,
distance: 10,
speed: 10
},
zIndex: {
value: { min: 0, max: 100 }
}
}
});
};
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
Hey @hallowichig0 ,
Could you update your bud to version 5.6.2?
I’ve reproduced it, and I don’t have this errors
Hi @Jacek,
Thank you for the response.
I have already updated the roots bud to v5.6.2 but the error still appears.
My package.json:
{
"name": "sage_theme",
"version": "1.2.0",
"description": "Sage, Bootstrap 5, ACF, Kirki, SASS, Blade",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"private": true,
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"scripts": {
"dev": "bud dev",
"build": "bud build",
"translate": "npm run translate:pot && npm run translate:js",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print"
},
"devDependencies": {
"@roots/bud": "5.6.2",
"@roots/bud-postcss": "^5.6.2",
"@roots/bud-sass": "^5.6.2",
"@roots/sage": "5.6.2"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.0.0",
"@popperjs/core": "^2.11.4",
"aos": "^2.3.4",
"bootstrap": "^5.1.3",
"jquery-match-height": "^0.7.2",
"lazysizes": "^5.3.2",
"mmenu-js": "^8.5.22",
"slick-carousel": "^1.8.1",
"smoothscroll-polyfill": "^0.4.4",
"venobox": "^2.0.4"
}
}
I think setting the public path to setPublicPath(‘/app/themes/sage-theme/public/’) would work but the problem is the URLs from acorn & the URL from setPublicPath is conflicting and it is doubling the URL. I’m still trying to figure this out and use some hooks base on the roots bud docs but still out of luck 
Kindly see the reference for conflicting URLs:
We think we might have a solution to get publicPath to play nice between acorn and bud.
In the meantime, you have two options:
publicPath specifically in the client using the EntryDescription object
Example:
bud.entry({
app: {
import: ['app.js']
publicPath: '/app/themes/sage/public/'
}
})
__webpack_public_path__ at the top of your entrypoint. See the webpack docs for the concept:If you want to set it up with DefinePlugin as documented you can utilize bud.define
Hi @kellymears,
Option 1 is working for me. I think right now this is the best solution 
Thank you so much. I have learned a lot with bud 
Hi @hallowichig0,
I’m having troubling getting this to work. Can you tell me where and how exactly you added the publicPath?
Thanks in advance!
Lukas