Parcel + React项目启动报错：@parcel/transformer-js: Unexpected token ) 问题排查与修复

咱们先拆解下你遇到的这个报错的核心原因，再一步步完成修复：

问题根源 #

1. React版本冲突+核心依赖缺失
   • 你在index.html里引入了CDN的React 16.6.3，但index.js里用的createRoot是React 18才新增的API，旧版本完全不支持这个语法；同时通过ES模块import和全局CDN双重加载React，会让Parcel的JS解析器逻辑混乱，直接抛出语法错误。
   • 你的package.json里没有显式安装react和react-dom，虽然react-google-charts依赖React，但版本不一定匹配，而且Parcel需要明确的依赖来正确处理JSX和React语法。
2. 冗余的CDN脚本
   用Parcel构建项目时，所有依赖都应该通过npm管理，手动引入CDN的React脚本属于重复加载，必然会引发冲突。

修复步骤 #

1. 安装匹配版本的React核心依赖 #

打开终端，在项目根目录执行以下命令，安装React 18+稳定版：

npm install react react-dom

2. 删除HTML里的冗余CDN脚本 #

把index.html里的这两行代码完全删除：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Parcel会自动把你通过import引入的React/ReactDOM打包到最终产物中，无需手动引入。

3. 修正HTML的小细节（非报错原因，但影响体验） #

你的viewport meta标签里少了个空格，把：

<meta name="viewport" content="width=device-width, initialscale=1.0">

改成：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 重启Parcel服务 #

先停止当前运行的服务，再执行：

npm run start

验证修复 #

完成以上步骤后，Parcel就能正常解析JSX和React语法，不会再抛出Unexpected token错误，你的App组件也能正常渲染出带Tailwind样式的标题。

如果你后续需要Tailwind CSS完全生效，记得确保已经配置好tailwind.config.js和.postcssrc文件（这部分和当前报错无关，就不展开说明了）。

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