Unable to compile after theme was renamed

sage
1

Hey guys. I can’t run npm run dev or npm run build after I renamed my theme. Here’s what I’ve tried so far:

  • I fixed the public path in bud.config.js to reflect the new theme name
  • Reactivated the theme in WP admin
  • Deleted the content of /public folder
  • Deleted the content of /wp-content/cache/ folder
  • Run all wp acorn commands to clear the cache

Every single time I get this error:

✘ Cannot read properties of undefined (reading 'getPublicEnv')

… Thrown by  @roots/bud-extensions/webpack-define-plugin

→ Documentation https://bud.js.org/docs/extensions

⌂ Originating error 
│ Cannot read properties of undefined (reading 'getPublicEnv')
│
│ BudError: Cannot read properties of undefined (reading 'getPublicEnv')
│     at Object.catch (file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-framework/lib/extension/index.js:93:30)
│     at async Object._register (file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-framework/lib/extension/index.js:290:9)
│     at async Extensions.run (file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:285:17)
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:299:13
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:298:13
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:298:13
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:298:13
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:298:13
│     at async file:///Users/user/Development/private/project/wp-content/themes/new-theme/node_modules/@roots/bud-extensions/lib/service/index.js:298:13

When I rename it back to its original name, everything works just fine.

Any ideas would be very appreciated.

2

Sage ships with a yarn.lock file and expects yarn commands to be ran for the build process. Did you start your project by running yarn and then suddenly switch to npm?

Show us the code, don’t tell us with words. What exactly does your Bud config look like?

4

Many thanks for reply @ben.

I’ve been using Sage for 2 years and I’ve never used yarn. Never had any issues with using npm. I cloned and renamed themes before and it always worked without any issues.

Here’s my bud config:

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/new-theme/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('https://localhost:3000')
    .setProxyUrl('https://project.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .set('settings.color.custom', true)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};
5

What version of Bud are you using?

Can you try using Yarn instead of npm to see if the error still exists? I’m only asking because there’s at least one known bug with bud currently that only affects npm users

6

With yarn I get the same errors.

Not sure what are the latest versions but this is what I use:

"@roots/bud": "6.16.1",
"@roots/bud-tailwindcss": "6.16.1",
"@roots/sage": "6.16.1",
7

The strange thing is that npm starts working as soon as I rename the theme back to its original name. I don’t even need to change anything in bud config.

8

In your initial troubleshooting steps you didn’t mention whether you’d deleted node_modules and re-run either yarn or npm i again after renaming in addition to your other steps. Have you done this?

9

Many thanks for the suggestion @MWDelaney.

I didn’t do this test before but I did it now - deleted node_modules , tried npm i, got the same error. Deleted node_modules, tried yarn, still the same error.

10

I’m able to reproduce this bug on v6.16.1, but I’m unable to on newer bud.js versions

Can you upgrade bud to one of the more recent versions? v6.21.0 is the latest

11

Thank you very much Ben. I deleted node_modules, raised versions to 6.21.0, run yarn and everything works fine now (not with npm though, its returning different error discussed here Compiling Error: Cannot read properties of null (reading 'useState')).

12

Yes, per that topic and the issue linked in it, you will need to use either --no-dashboard or downgrade to an older version until the bug is resolved