使用wp-scripts构建React+TypeScript项目遇Unexpected token错误求助

问题概述 #

在用wordpress-scripts构建React+TypeScript应用时，遇到Unexpected token语法错误，错误定位在TypeScript类PropductPriceTableLine的public listProps属性定义行（第144行）。尝试将访问修饰符改为static/protected/private后问题依旧，但同一文件内的函数式组件PriceList使用类似代码可正常运行。

报错代码 #

class PropductPriceTableLine extends Component {

    public listProps = [
        {
            propductid: 420,
            name: "stamp",
            displayName: "stamp"
        },
        {
            propductid: 421,
            name: "stamp1",
            displayName: "stamp1"
        },
    ];


    static defaultProps = {
        class: "line-price", // line-border
        extClass: ""
    };

    protected listItems = this.listProps.map((prop) =>
        <PropductPriceTableLineItem {...prop}/>
    );
    render() {return (...)}
}

错误详情 #

ERROR in ./src/PriceList.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ./src/PriceList.tsx: Unexpected token (144:11)

  142 | class PropductPriceTableLine extends Component {
  143 |
> 144 |     public listProps = [
      |            ^
  145 |         {
  146 |             propductid: 420,

正常运行的函数式组件代码 #

function PriceList(props) {

    const listProps = [
        {id: "stamp-1", title:{name: "stamps1", href: "#stamps1", id:"title-nav-carousel1"}},
        {id: "stamp-2", title:{name: "stamps2", href: "#stamps2", id:"title-nav-carousel2"}},
        {id: "stamp-3", title:{name: "stamps3", href: "#stamps3", id:"title-nav-carousel3"}},
        {id: "stamp-4", title:{name: "stamps4", href: "#stamps4", id:"title-nav-carousel4"}},
    ]
    const listItems = listProps.map((props) =>
        <HeaderBlock {...props}/>
    );
    return (...);
}

相关配置文件 #

webpack.config.js #

const defaults = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaults,
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

package.json（相关片段） #

{
...
  "main": "src/index.tsx",
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:js:src": "wp-scripts lint-js ./src",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "devDependencies": {
    "@wordpress/scripts": "^25.1.0"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "jquery": "^3.6.3",
    "popper": "^1.0.1",
    "popper.js": "^1.16.1",
    "react-bootstrap": "^2.7.0",
    "wow": "^0.0.6"
  },
...
}

解决方法 #

原因分析 #

错误源于类字段（Class Fields）语法未被Babel正确解析，@wordpress/scripts默认的Babel配置可能未启用TypeScript类属性的支持，导致编译时无法识别带访问修饰符的类属性定义。

步骤1：添加Babel配置文件 #

在项目根目录创建babel.config.json，配置如下：

{
  "presets": [
    "@wordpress/babel-preset-default",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
}

该配置在wordpress默认预设基础上，添加TypeScript预设及类属性相关插件，确保类字段语法被正确编译。

步骤2：完善TypeScript配置 #

确保项目根目录有tsconfig.json，配置示例：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*"]
}

noEmit: true让TypeScript仅做类型检查，编译交给webpack处理；isolatedModules确保文件符合ES模块规范，适配wordpress-scripts的打包流程。

步骤3：清理缓存并重新构建 #

删除node_modules/.cache目录（或运行wp-scripts clean），再执行：

npm run build

可选：升级@wordpress/scripts版本 #

若上述方法无效，可尝试升级@wordpress/scripts到最新稳定版，新版本可能已默认支持TypeScript类字段语法：

npm install @wordpress/scripts@latest --save-dev

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