未捕获的语法错误：bundle.js:1 中的意外标记“<”答案

【问题标题】：Uncaught SyntaxError: Unexpected token '<' in bundle.js:1未捕获的语法错误：bundle.js:1 中的意外标记“<”
【发布时间】：2020-02-27 02:20:19
【问题描述】：

我正在为 React Web 应用程序设置样板文件，并在导航到 http://localhost:3000 时获得带有上述控制台错误的空白页面。我是一个新手训练营的学生，我对 webpack 配置的知识非常浅薄，尤其是有很多依赖项/babel 设置在起作用。我查看了对发布此问题的其他用户的回复，但似乎它可能是由围绕 webpack 配置的任何数量的问题引起的，我担心在紧迫的时间限制下会进一步破坏事情。

所以我在下面发布了一些代码。我很困惑-感谢您的指点！

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>-= PROJECT TITLE PLACEHOLDER =-</title>
  <script src="/bundle.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

app/index.js

import '../public/style.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './redux'
import Users from './components/Users'

ReactDOM.render(
  <Provider store={store}>
    <Users />
  </Provider>,
  document.getElementById('app')
)

webpack.config.js

'use strict'

const { resolve } = require('path')

module.exports = {
  entry: ['babel-polyfill', './app/index'],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
        options: {
          presets: ['react']
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

package.json

{
  "name": "boilermaker",
  "version": "0.0.1",
  "description": "boilerplate for react-redux-express-sequelize app",
  "main": "server/index.js",
  "scripts": {
    "start-dev": "npm run build-watch & npm run start-server",
    "start-server": "nodemon --watch server -e js,html --ignore public server/index.js",
    "build-watch": "webpack -w",
    "start": "echo 'Running server for production - developers, use npm run start-dev for development' && node server/index.js",
    "seed": "node seed.js"
  },
  "keywords": [
    "react",
    "redux",
    "skeleton"
  ],
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.2",
    "chalk": "^2.4.1",
    "connect-session-sequelize": "^6.0.0",
    "crypto": "^1.0.1",
    "express": "^4.14.0",
    "express-session": "^1.17.0",
    "lodash": "^4.17.15",
    "morgan": "^1.9.1",
    "passport": "^0.4.0",
    "passport-google-oauth": "^2.0.0",
    "pg": "^7.4.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "sequelize": "^4.37.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^2.1.1",
    "eslint": "^4.19.1",
    "eslint-config-fullstack": "^5.0.0",
    "eslint-plugin-react": "^7.8.2",
    "nodemon": "^1.19.1",
    "redux-devtools-extension": "^2.13.8",
    "style-loader": "^0.21.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

.babelrc

{
  "presets": ["babel-preset-react", "react", "env", "stage-2"]
}

【问题讨论】：

您的页面正在尝试加载http://localhost:3000/bundle.js。当您在浏览器中访问该网址时，您会看到什么？我怀疑这不是捆绑包，而是 HTML 响应。
感谢@hughes 的回复 - 我设法解决了这个问题，这是一个愚蠢的初学者错误（见我的回答）。但是我暂时恢复了我的修复以测试您的建议并让您知道我所看到的 - 这是相同的问题，控制台中出现 Unexpected Token 错误的空白页面。周末愉快！

标签： javascript reactjs webpack package.json

【解决方案1】：

这最终是由于一个天真的错误，我将我的静态中间件在我的 HTML 发送到我的 Express 路由器中。当一位同学要求查看我的路由设置时，我发现了它，此时它跳到了我身上。感谢您的审阅，对于菜鸟的错误，我们深表歉意！

【讨论】：

是否也需要更改 babel-loader 规则？
嗨@user1538301 - 感谢您再次入住！我将更改恢复为您推荐的 babel-loader 规则，并且没有任何问题，因此似乎不需要解决此特定问题。

【解决方案2】：

您需要更新您的babel-loader 规则：

{
  test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx
  include: resolve(__dirname, './app'),
  loader: 'babel-loader',
  options: {
    presets: ['react']
  }
},

编辑： 另外我在package.json 中没有看到 babel 配置，也没有看到 .babelrc，所以这是假设配置在 .babelrc 中并正确设置为 React/JSX 做准备（我在 package.json 中看到了 babel-preset-react；我很确定您在 babel 配置中需要它）。

【讨论】：

谢谢你，很抱歉——我忽略了发布我的 .babelrc，它现在被添加了。我按照您的指示更新了 babel-loader 规则，但仍然有问题。老实说，我对各种 babel 依赖项如何与 webpack 一起工作感到困惑，感觉就像我有时在追逐我的尾巴 :) 编辑：我将 babel-preset-react 添加到 .babelrc，但仍然在控制台中收到错误。添加后，我将在原始帖子中更新我的 .babelrc 以反映其中的内容。

【解决方案3】：

我相信你的问题可能是你的 babel 预设的顺序。它们从右到左应用。

例如，我的一个项目中的 .babelrc 文件如下所示：

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

【讨论】：