I just created a new Sage 10 project using composer create-project roots/sage your-theme-name dev-main
. I then installed React using yarn add -D react
, and edited resources/scripts/editor.js
so that I could try registering a new block variation, which involves inserting an SVG using JSX syntax:
import React from 'react';
...
wp.blocks.registerBlockVariation(
'core/columns', {
name: 'four-columns',
title: 'Four columns; equal split',
icon: <svg …>…</svg>, // Shortened here for brevity
scope: ['block'],
innerBlocks: [
['core/column'],
['core/column'],
['core/column'],
['core/column'],
],
}
);
When I try to build the project, there is a parsing error and the project can’t be compiled:
Parsing error: This experimental syntax requires enabling one of the following
parser plugin(s): "jsx", "flow", "typescript".
I see that in this latest iteration of Sage 10, the .eslintrc.js
file has been significantly shortened, and inherits basically all its settings from @roots/sage/eslint-config
. I’m not sure if eslint is what’s outputting this error, or babel, or something else.
I have another Sage 10 project that I built a few months ago (Laravel Mix only, no Bud), and there’s no problem using JSX in that project.
I feel like perhaps I just don’t know what steps are required to get the project to recognize JSX, although I’m also surprised it doesn’t just work out of the box, considering editor.js
is meant to be loaded specifically in the context of WordPress’s React-based block editor.