如何解决React JS中出现的'Unexpected token, expected ","'解析错误

解决方案 #

你贴出的这段代码本身JSX语法是合规的，遇到的Unexpected token, expected ","报错可按以下顺序排查解决：

• 检查文件后缀名：将当前代码文件的后缀从.js改为.jsx，大部分打包工具默认仅对.jsx/.tsx后缀文件做JSX语法转译，.js文件内的JSX标签会被识别为非法语法导致报错。
• 检查Babel配置：如果是自行搭建的React项目，确认已安装@babel/preset-react依赖，且在Babel配置文件的presets字段中添加了该预设，正确编译JSX语法。
• 检查特殊字符：可以尝试将组件代码合并为一行测试，排除当前代码中存在隐形换行符、全角空格等特殊字符导致的语法识别异常：

const Movie = () => <div className="movie">This is movie component</div>;

• 检查导入语句：确认其他文件导入该Movie组件的语句写法正确，默认导出的组件导入时不需要加大括号，示例写法：import Movie from './Movie'
• 检查React版本：如果使用的是React 17以下的旧版本，确保顶部已经引入React，你当前代码的引入写法是正确的。

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