Django+Babel+Webpack环境下出现Unexpected token错误求助

我来帮你搞定这个问题——你遇到的这个SyntaxError: Unexpected token错误，本质是Babel没有配置对应的预设来转译React的JSX语法。虽然你已经在Webpack里配置了babel-loader，但Babel本身不知道该怎么处理<div>这种JSX标签，所以才会抛出这个错误。

下面是具体的解决步骤：

1. 安装必要的Babel依赖包 #

首先需要安装Babel核心库、环境预设和React预设，打开终端运行：

npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env

2. 配置Babel预设 #

在项目根目录新建一个.babelrc文件（如果已经有就直接修改），写入以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

这个配置告诉Babel：用@babel/preset-env转译ES6+语法，用@babel/preset-react转译JSX语法。

3. 确认Webpack配置没问题 #

你的webpack.config.js里的module规则是正确的，已经指定了处理.js文件并排除node_modules，这部分不需要修改，只需要确保上面的Babel配置生效即可。

4. 重新启动Webpack #

现在重新运行你的Webpack构建命令，之前的语法错误应该就会消失了。

补充一句：很多视频教程可能会默认你了解这些前置配置，或者讲解时一笔带过，所以很容易遗漏这一步——这是React项目结合Webpack+Babel时非常常见的入门坑~

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