Hi,
I have an issue with yarn build. I tried to compile Guttenberg custom block and receive errors.
My package.json:
"name": "sage",
"private": true,
"browserslist": [
"extends @roots/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"type": "module",
"scripts": {
"dev": "bud dev",
"build": "bud build",
"translate": "yarn translate:pot && yarn translate:update",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
"translate:update": "wp i18n update-po ./resources/lang/sage.pot ./resources/lang/*.po",
"translate:compile": "yarn translate:mo && yarn translate:js",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print",
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang",
"lint:css": "stylelint 'src/**/*.scss'",
"lint:css:fix": "stylelint 'resources/**/*.scss' --fix"
},
"devDependencies": {
"@roots/bud": "6.16.1",
"@roots/bud-sass": "6.17.0",
"@roots/bud-stylelint": "6.17.0",
"@roots/bud-tailwindcss": "6.16.1",
"@roots/sage": "6.16.1",
"stylelint-config-tailwindcss": "^0.0.7",
"stylelint-scss": "^5.3.0"
},
"dependencies": {
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@babel/preset-react": "^7.23.3",
"@roots/bud-babel": "6.16.1",
"@roots/bud-react": "6.17.0",
"@roots/bud-wordpress-externals": "6.17.0",
"@splinetool/runtime": "^0.9.496",
"@wordpress/data": "^9.18.0",
"babel-loader": "^9.1.3",
"greensock": "^1.20.2",
"jquery": "^3.7.1",
"lottie-web": "^5.12.2",
"popmotion": "^11.0.5",
"postcss-scss": "^4.0.9",
"slick-carousel": "^1.8.1",
"stylelint": "^15.11.0",
"stylelint-config-standard": "^34.0.0"
}
}
my bud.config.js:
/**
* Compiler configuration
*
* @see {@link https://roots.io/docs/sage sage documentation}
* @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
*
* @type {import('@roots/bud').Config}
*/
export default async (app) => {
//app.extensions.get('@roots/wordpress-hmr').disable();
app.use('@roots/bud-babel');
/**
* 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'])
.entry('hero', ['./scripts/block/hero.jsx']);
/**
* Set public path
*
* @see {@link https://bud.js.org/docs/bud.setPublicPath}
*/
app.setPublicPath('/wp-content/themes/xxx/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('http://0.0.0.0:3001') //on host http://0.0.0.0:3001
.setProxyUrl('http://172.17.0.1:8088') //host URL
.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
.setSettings({
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors().enable()
.useTailwindFontFamily().enable()
.useTailwindFontSize().enable();
};
and my custom block with React with JSX causes:
yarn build
yarn run v1.22.19
$ bud build
╭ sage [390aac6ba90f1ec1] ./public
│
│ │ Module parse failed: Unexpected token (37:6)
│ │ File was processed with these loaders:
│ │ * ../node_modules/@roots/wordpress-hmr/lib/loader.cjs
│ │ You may need an additional loader to handle the result of these loaders.
│ │ |
│ │ | return (
│ │ > <div>
│ │ | <RichText
│ │ | tagName="p"
I have no idea how to resolve it and am unable to find a similar issue.
Can you help me?