Hello everyone,
I just found out I can use Sage to create WordPress theme using Laravel blade components and other Laravel features.
To install the Sage, I followed this installation guide step by step. I installed Acron WP Plugin, then Volta (v1.1.0) and Yarn (v1.22.19) and at the end I created a Sage project using composer create-project roots/sage newtheme dev-main.
The problem is that when I try to compile assets using: yarn build, after running: yarn; it throws this error every time:
ERROR:
PS C:\xampp\htdocs\wordpress\wp-content\themes\sage> yarn build
yarn run v1.22.19
$ bud build
Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
C:\xampp\htdocs\wordpress\wp-content\themes\sage\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex;
^
[Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\wordpress\wp-content\package.json'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\\xampp\\htdocs\\wordpress\\wp-content\\package.json'
}
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Just for record, I want to add that I also updated bud.config.js file with local dev URL, however, I’m not sure if the address is quite right! It should be URL but the WordPress local site is located in http://localhost/wordpress. I tried these options but I still get same error:
.serve("http://localhost:3000/wordpress").serve("http://localhost/wordpress").serve("http://localhost").serve("http://127.0.0.1:3000/wordpress").serve("http://127.0.0.1/wordpress").serve("http://127.0.0.1")
And this is bud.config.js contents:
// @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(false)
/**
* Development origin
*/
.serve("http://localhost:3000/wordpress")
/**
* URI of the `public` directory
*/
.setPublicPath("/app/themes/sage/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()
};
Other information
WordPress Version: 6.0.3
PHP Version: 8.1
What causes this problem exactly and how to solve it? Please help me to solve this problem. Thank you.
