未捕获的语法错误：bundle.js 中的意外标记“<”：1
我正在为 React Web 应用程序设置样板，并在导航到http://localhost:3000. 我是一个新的训练营学生，我对 webpack 配置的了解非常浅，尤其是有很多依赖项/babel 设置在起作用。我查看了对发布此问题的其他用户的回复，但似乎它可能是由围绕 webpack 配置的任何数量的问题引起的，而且我担心在时间紧迫的情况下会进一步破坏事情。
所以我在下面发布了我的一些代码。我很困惑-感谢您的指点！
公共/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>
应用程序/ 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'
]
}
]
}
}
小怪兽爱吃肉3回答
-
慕莱坞森
这最终是由于一个幼稚的错误，我在将HTML 发送到 Express 路由器之后放置了静态中间件。当一个同学要求查看我的路由设置时，我发现了它，此时它跳了出来。感谢您的点评，对菜鸟的错误表示歉意！ -
杨魅力
您需要更新babel-loader规则：{ test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx include: resolve(__dirname, './app'), loader: 'babel-loader', options: { presets: ['react'] }},编辑：我也没有在你的中看到 babel 配置，我package.json也没有看到 a.babelrc所以这是假设配置在 a 中.babelrc并且为 React/JSX 正确设置（我babel-preset-react在 中看到package.json；我很确定你需要在你的巴贝尔配置）。 -
三国纷争
我相信您的问题可能是您的 babel 预设的顺序。它们从右到左应用。例如，我的一个项目中的 .babelrc 文件如下所示：{ "presets": ["@babel/preset-env", "@babel/preset-react"]}
随时随地看视频慕课网APP
相关分类
JavaScript