My JavaScript build fails

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().


I have also added a = "red"; to be sure.

import {domReady} from '@roots/sage/client';

 * app.main
const main = async (err) => {
  if (err) {
    // handle hmr errors

  // application code
  console.log('debugging alert');
  alert('debugging alert'); = "red";

 * Initialize
 * @see

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 '' 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) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      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.

     * 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.

     * Development URL to be used in the browser.
     * Relative path to the public directory.

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"),"red"}))},402:function(){}},function(e){var n=function(n){return e(e.s=n)};n(683),n(402)}]);

Thank you for any help.

Is the javascript file being enqueued on the page?

If you’re using Acorn v2.1.0 you’ll have to temporarily downgrade or use dev-2.x until 🐛 Fix javascript enqueue handle by Log1x · Pull Request #239 · roots/acorn · GitHub is pushed into a release.

EDIT: Assuming this is related, Acorn v2.1.1 has been released with a fix.


Thumbs up @Log1x. You fixed it!

Yes, my JS file was enqueued on the page. I have installed Acorn v2.1.1 and now it is working.

I am going to read your commit to learn something more.

Have a nice day/night.

1 Like