@wordpress/scripts项目React组件渲染失败，报jsx未定义错误

在@wordpress/scripts项目中无法渲染React组件，该工具自带自动Babel配置，但Babel疑似失效，报错信息如下：

Uncaught TypeError: Cannot read properties of undefined (reading 'jsx')
报错触发于root.render()方法。

index.js #

import React from "react"
import ReactDOM from "react-dom/client"

import Test  from './scripts/test';

console.log("Running index");
console.log('Test', Test);

if(document.querySelector('#render-react-test') !== null){
    console.log("Running render-react-test");
    const rootElement = document.querySelector("#render-react-test");
    const root = ReactDOM.createRoot(rootElement);
    console.log(root);
    root.render(<Test />);
} 

Test.js #

import React from 'react';

const Test = () => {
    return (
        <h1>Testing</h1>
    )
  };
  
export default Test;

package.json #

{
  "name": "bailys-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "dependencies": {
    "@wordpress/scripts": "^30.9.0",
    "add-to-calendar-button-react": "^2.6.19",
    "convert-units": "^2.3.4",
    "gsap": "^3.12.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-modal": "^3.16.1",
    "swiper": "^11.1.14"
  }
}

解决方法 #

1. 配置JSX自动转换
   在项目根目录创建.babelrc文件，手动添加React预设并启用自动runtime：

{
  "presets": [
    "@wordpress/babel-preset-default",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

2. 简化React导入
   React 17+支持无需导入React即可使用JSX，可移除代码中不必要的import React from 'react'语句。

3. 修复版本兼容性
   @wordpress/scripts@30.9.0与React 18.3.1可能存在兼容问题，可二选一操作：

• 降级React版本：npm install react@^17.0.2 react-dom@^17.0.2
• 升级@wordpress/scripts到最新版：npm install @wordpress/scripts@latest

4. 指定构建入口
   @wordpress/scripts默认查找src/index.js作为入口，若你的入口在根目录，需修改scripts命令：

"scripts": {
  "build": "wp-scripts build index.js",
  "start": "wp-scripts start index.js"
}

内容的提问来源于stack exchange，提问作者fluffybacon