I have build a project using Sage 10 and it’s on production. Thigs are going fine both on staging site and prouduction one, but I have problems locally.
Whenever I build my assets using yarn dev (or event yarn build), there seems to be a problem because they are not loaded when I open the page.
The script from “https://local.test/dev/public/app/themes/local-theme/public/resources_scripts_components_ShopSectionSlider_js.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Uncaught SyntaxError: expected expression, got '<'
ChunkLoadError: Loading chunk resources_scripts_components_ShopSectionSlider_js failed.
On the Network tab, all the font and JS files are of type HTML.
This is my Bud config (v5.5.0):
const path = require('path')
require('dotenv').config({ path: path.resolve(__dirname, '../../../.env') })
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} config
*/
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app.js', '@styles/app.scss']
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets([app.path('src', 'images')])
.assets([app.path('src', 'fonts')])
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('resources/views/**/*', 'app/**/*')
/**
* Define the public path for dynamically imported assets.
*
* I am defining it an .env file and accessing it with `bud.env`.
*/
.define({
ASSET_PATH: JSON.stringify(process.env.ASSET_PATH)
})
.setPublicPath('')
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.proxy(process.env.WP_HOME)
.use(
new SVGSpritemapPlugin('resources/sprite/*.svg', {
output: {
filename: 'spritesheet.svg',
chunk: { keep: true },
svgo: false
}
})
)
.use(new ImageminWebpWebpackPlugin())
.postcss.setPlugin(
'postcss-color-mod-function',
require.resolve('postcss-color-mod-function')
)
.postcss.setPlugin('postcss-pxtorem', require.resolve('postcss-pxtorem'))
/**
* Development URL
*/
.serve(`${process.env.WP_HOME}:3000`)
}
Ah just noticed you’re not accessing via the webpack dev server ie. http://localhost.test:3000/. I think you either need to have that running or run yarn build to access via the host domain https://local.test/
I hope I’m wrong as having the same/similar issue currently (posted a Q on the Discord server earlier today to see if I’m doing something silly or if this is expected with webpack/hmr).
If you get an answer from Discord, it would be very helpful if post it here also.
I noticed that this problem occurs even in a new fresh project.
The assets are loaded fine on dev internal server (0.0.0.0:3000) but don’t work on proxy. I may open an issue about this.
The thing in my case is that for some reason I can’t open the dev on my project; it just redirects to the proxy URL or it doesn’t open at all.
yeah sounds like you’re having the exact same issue I had - annoyingly Valet adds a redirect from HTTP → HTTPS when using the secure command.
Option 1
Manually update the valet nginx conf ~/.config/valet/Nginx/example.test so you’re able to access the site over HTTP + HTTPS or run valet unsecure example to remove https entirely.
I did unsecure it since the second option didn’t work for me either.
My setup for dynamic js is inspired by this.
So, I have a publicPath.js file inside scripts folder which has this line:
__webpack_public_path__ = ASSET_PATH
I import this file in the main entry app.js and that’s what made dynamic imports work (in staging and production at least).
I removed this import declaration and now the JS files are working correctly on the dev server.
So, it means that I need to remove this line working locally, but don’t forget it to push it, because it would break the scripts on production.
Still, I can’t see the SVGs because they are from the proxy link eg: http://local.test
Security Error: Content at http://localhost:55871/ may not load data from http://local.test/app/themes/local-theme/public/spritesheet.svg.
I have used @asset to show the SVGs files. Also, the path is wrong.
@slowrush Out of curiosity, can you share what is your setup for Bud and JS that you use to load components dynamically?
I’ve had to put dynamic imports on the back burner because of this issue + a tight deadline.
Switched back to importing assets per ACF block via Roots\bundle (bundle('block-name')->enqueue();) + use browser-sync for live reload for the time being. If I make any progress I’ll be sure to post back here.
I know a fair few folks have solutions working, hopefully, they’ll follow up but I’ve hit a few too many walls
Another example I just tested on vanilla sage. This one will only load the css to change the page background if ?condition=true is appended to the URL:
// resources/scripts/app.js
const init = async () => {
let params = new URL(document.location.toString()).searchParams;
let condition = params.get('condition');
if (condition) await import('./test.js');
};
init();
If you run that code with yarn bud dev the code will work on the dev server.
If you run that code with yarn bud build the code will work on the proxy (and in staging, production, etc.)
Does /app/themes/eri-test/public/js/dynamic/457.js exist on disk?
Is /app/themes/eri-test/public/ the actual public path?
Dynamic imports just work out of the box. There is no reason to set anything like ASSET_PATH or use any webpack magic comments to use them. I don’t doubt that something isn’t working for you and maybe I just don’t understand the question.
If you want to use an image you can just import it:
import { domReady } from "@roots/sage/client";
import test from "@images/test.png";
const main = async () => {
await import("./test.js");
document.querySelector("#app").innerHTML = `
<div>
<img src="${test}" />
</div>`;
};
domReady(main);
import.meta.webpackHot?.accept(console.error);
Ok, I created a new sage theme (since I mistakenly deleted the current one I was using for tests) and now it’s working as you said.
Still, the situation in my current project is not resolved by this. After days of trying to debug this issue, I still haven’t figured it out.
I have pasted my bud.config.js file in the thread starter.
If I try to set .setPublicPath() as you propose, no asset is loaded because the final link is wrong eg https://local.test/app/themes/local-theme/public/dev/public/app/themes/local-theme/public/app.6e4d64.css
while if I let it empty, the assets are loading ok, but not the chunks:
I think it’s because you are defining ASSET_PATH. Don’t do that.
The second issue is because you are trying to require chalk somehow. I’m not sure why that is but I don’t think it’s a problem with bud.js. I don’t think I will be able to help you without a repo that reproduces the issue.
You can install it and try: yarn dev and yarn build.
In the yarn dev case things work fine.
In the yarn build case there are errors because assets are not found:
GET http://bedrock.test/app/themes/eri-5.5.0/public/app/themes/eri-5.5.0/public/app.488aeb.js
[HTTP/1.1 404 Not Found 324ms]
If you set the publicPath to empty (.setPublicPath("")), on yarn dev things are working fine, but on yarn build → Uncaught (in promise) ChunkLoadError: Loading chunk 806 failed.
I test the dev on bedrock.test:3000 and build on bedrock.test
the same certs work perfectly with BrowserSync server so no idea what’s going on there?
