Yarn dev localhost DevTools errors after updating acorn to v3.0

sage
,
1

This is my first Sage 10 build. Site was ready to move to staging env, so I thought I’d run composer update beforehand, and got the errors that led to me updating Acorn to v3.0.

I updated Acorn as per the docs (thanks!), ran yarn build, and everything went smoothly moving to staging (via SFTP), and later to production.

Back working on the dev site and yarn dev works as before, except when I change a blade file, or even just refresh the page, I get errors on localhost:3000 that I wasn’t getting before - but only when DevTools is open. If I close DevTools localhost:3000 runs and updates as normal, until I reopen DevTools again.

The breakpoint in DevTools is flagging in app.css on line 39:

var ___CSS_LOADER_URL_REPLACEMENT_15___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_15___);

which points to the url:

"http://localhost:3000/app/themes/mysite/public/fonts/inter-v12-latin-700.ttf"

I can’t see what the error is and all the fonts seem to be loading correctly, just as they do on staging and production. Has anyone had this type of error before? Is it due to updating Acorn? I can see another update has come out to v3.1 but I haven’t done that yet.

Thanks

2

Can you give us the details about your Bud setup?

  • What version of Bud are you on? If you aren’t on at least v6.6.8 then I’d recommend upgrading
  • What does your Bud config look like?

Also:

so I thought I’d run composer update beforehand, and got the errors that led to me updating Acorn to v3.0.

Just running a composer update without being specific about what packages you’re wanting to upgrade will likely result in errors in general — that’s a dangerous command to run on a codebase IMO. Look into tools like Renovate and Dependabot for upgrading individual dependencies, one at a time (unless they’re related of course).

3

Hi Ben, noted and thanks, I appreciate your input.

I am on Bud v6.6.8 and my Bud config is below.

// @ts-check

/**
* Build configuration
*
* @see {@link https://bud.js.org/guides/configure}
* @param {import('@roots/bud').Bud} app
*/
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://mydomain.local")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/mytheme/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
        },
      })
      .useTailwindColors()
      .useTailwindFontFamily()
      .useTailwindFontSize()
      .enable()
};
1 Like