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.
/**
* 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.
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';
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