Laravel8+Babel+Mix+React+TS类组件传接口报Unexpected token错误

错误根因 #

该语法报错是Babel无法识别TypeScript泛型语法导致，核心问题有3个：

1. 包含TypeScript语法的React组件文件使用了.jsx扩展名，JSX规范不支持TS泛型写法
2. Babel配置缺失TypeScript处理预设，无法解析TS类型相关语法
3. Laravel Mix配置使用了处理普通JS的mix.js()方法处理TS入口，未启用内置的TS编译能力

解决方案 #

1. 修正文件扩展名

将MyComponent.jsx重命名为MyComponent.tsx，所有包含TS语法的React组件必须使用.tsx扩展名。

2. 安装缺失依赖

执行命令安装Babel的TypeScript预设：

yarn add @babel/preset-typescript --dev

3. 更新.babelrc配置

补充TypeScript预设，注意预设加载顺序要放在最后：

{
    "plugins": ["transform-class-properties"],
    "presets": [
        ["@babel/preset-env", {"modules": false}],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

4. 修正webpack.mix.js配置

将mix.js()替换为Laravel Mix专门用于处理TS的mix.ts()方法，删除手动添加扩展名的冗余代码，修正后配置如下：

const mix = require('laravel-mix');

require('laravel-mix-purgecss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 */

mix.ts('resources/js/app.ts', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')(),
    ])
    .setResourceRoot("/")
    .purgeCss({
        enabled: mix.inProduction(),
        folders: ['resources', 'app'],
        extensions: ['html', 'js', 'ts', 'tsx', 'php', 'vue'],
    });

5. 额外检查项

确认interfaces.ts文件中用到的ITask和IColumn接口已经正确导出，否则会触发后续类型未定义的报错。

6. 重新编译

执行全量清理重建命令即可：

watchman watch-del-all && rm -f yarn.lock && rm -rf node_modules && yarn && yarn cache clean && yarn dev

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