未捕獲的 SyntaxError：bundle.js:1 中的意外標記“<”

Question

我正在為反應 web 應用程序設置樣板，並在導航到http://localhost:3000時獲得帶有上述控制台錯誤的空白頁面。 我是一名新的訓練營學生，我對 webpack 配置的了解非常淺，尤其是在有很多依賴項/babel 設置的情況下。 我查看了對發布此問題的其他用戶的回復，但似乎它可能是由圍繞 webpack 配置的任何數量的問題引起的，我擔心在緊迫的時間限制下會進一步破壞事情。

所以我在下面發布了我的一些代碼。 我很困惑-感謝您的任何指點！

公共/索引.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>

應用程序/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"]
}

Answer 1

這最終是由於一個天真的錯誤，我將 static 中間件放在我的 HTML 發送到我的 Express 路由器之后。 當一位同學要求查看我的路由設置時，我發現了它，此時它突然出現在我身上。 感謝您的評論，對於菜鳥的錯誤，我們深表歉意！

Answer 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 正確設置（我看到babel-preset-react在package.json中babel-preset-react ；我很確定您在 babel 配置中需要它）。

Answer 3

有時，此錯誤是因為package.json沖突。 如果您在現有的 react 文件夾中啟動一個新的node項目，它可能會出現此錯誤。 在這種情況下盡量不要使用npm init或npm init -y

Answer 4

我相信你的問題可能是你的 babel 預設的排序。 它們從右到左應用。

例如，我的一個項目中的 a.babelrc 文件如下所示：

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

未捕獲的 SyntaxError：bundle.js:1 中的意外標記“<”

問題描述

4 個解決方案

解決方案1
1 2019-10-31 18:13:25

解決方案2
0 2019-10-31 17:07:02

解決方案3
0 2022-09-03 09:10:30

解決方案4
-1 2019-10-31 18:14:41

未捕獲的 SyntaxError：bundle.js:1 中的意外標記“&lt;”

問題描述

4 個解決方案

解決方案1 1 2019-10-31 18:13:25

解決方案2 0 2019-10-31 17:07:02

解決方案3 0 2022-09-03 09:10:30

解決方案4 -1 2019-10-31 18:14:41

未捕獲的 SyntaxError：bundle.js:1 中的意外標記“<”

解決方案1
1 2019-10-31 18:13:25

解決方案2
0 2019-10-31 17:07:02

解決方案3
0 2022-09-03 09:10:30

解決方案4
-1 2019-10-31 18:14:41