Hi there,
I installed a fresh new Bedrock + Sage 10, without any customisation. Just a brand new debugging environment. I am also using Laravel Valet.
$ composer create-project roots/bedrock
$ cd web/app/themes && composer create-project roots/sage debugging
$ composer require roots/acorn
Into my ./resources/app.js I simply added a console.log and an alert().
EDIT:
I have also added a document.body.style.backgroundColor = "red"; to be sure.
import {domReady} from '@roots/sage/client';
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
// application code
console.log('debugging alert');
alert('debugging alert');
document.body.style.backgroundColor = "red";
};
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
Running yarn dev I am able to catch the alert() and the console.log(), running yarn build nothing is shown.
EDIT: the red background is shown running yarn dev but the white color does not change running yarn build.
The only error I am getting into the console is:
Access to script at 'http://bedrock.test/wp/wp-includes/js/twemoji.js?ver=6.0' from origin 'http://0.0.0.0:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.
I suppose it is not related with my problem, anyway.
The following is my bud config:
/**
* @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'],
editor: ['@scripts/editor', '@styles/editor'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets('images')
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('resources/views/**/*', 'app/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy('http://bedrock.test')
/**
* Development URL to be used in the browser.
*/
.serve('http://0.0.0.0:3000')
/**
* Relative path to the public directory.
*/
.setPublicPath('/app/themes/debugging/public/');
};
I have no idea whats happening, I am making an enormous mistake here, but I canât figured out what I am missing.
The compiled JavaScript:
"use strict";(self.webpackChunksage=self.webpackChunksage||[]).push([[143],{978:function(e,n){Object.defineProperty(n,"__esModule",{value:!0}),n.default=e=>{window.requestAnimationFrame((function n(){document.body?e():window.requestAnimationFrame(n)}))}},194:function(e,n,o){var t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.domReady=void 0;const u=t(o(978));n.domReady=u.default},683:function(e,n,o){(0,o(194).domReady)((async e=>{e&&console.error(e),console.log("debugging alert"),alert("debugging alert"),document.body.style.backgroundColor="red"}))},402:function(){}},function(e){var n=function(n){return e(e.s=n)};n(683),n(402)}]);
Thank you for any help.