VSCode中React代码无报错Chrome运行报Unexpected token '{'如何解决

核心报错原因 #

你遇到的Uncaught SyntaxError: Unexpected token '{'是浏览器原生不支持JSX语法导致的：
你代码里的<Button variant="outlined" onClick={textValueFn}>Play</Button>属于JSX语法，VSCode安装了React相关语法插件后只会做静态语法校验，不会报错，但浏览器无法直接解析JSX里的{}插值语法，遇到{就会抛出语法错误。

代码其他隐含问题 #

除了JSX未转译的问题，你的代码还有3处可预见的错误：

• Input、Button组件未导入：如果使用的是第三方组件库（比如Material UI），没有提前导入组件会触发未定义变量报错
• ariaLabel变量未声明：你在Input组件的inputProps中直接使用了未定义的ariaLabel变量，后续运行会抛出引用错误
• React挂载节点参数错误：document.getElementsByClassName('app')返回的是DOM节点集合，不是单个DOM节点，直接传给ReactDOM.render会导致挂载失败

修复方案 #

临时调试修复 #

如果是要快速在浏览器里运行调试：

1. 在popup.html里引入Babel转译CDN，并且把引入popup.js的script标签type属性改为text/babel，让浏览器可以实时转译JSX语法
2. 补全缺失的导入和变量定义：
   如果你用的是MUI组件库，补充导入语句：

   import { Button, Input } from '@mui/material';
   

   提前声明ariaLabel变量：

   const ariaLabel = { 'aria-label': '文本输入框' };
   

3. 修正挂载节点写法：

   ReactDOM.render(<App/>, document.getElementsByClassName('app')[0])
   

正式项目推荐方案 #

长期开发React项目建议使用Vite、Create React App等工程化脚手架，脚手架会自动处理JSX转译、依赖打包、语法校验等能力，不需要手动配置转译规则。

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