我的项目编译正确。但是每当我加载网页时，我都会在控制台中收到此错误：
bundle.4bc8d06487c51394a532.js:71 Uncaught Error: Module build failed: SyntaxError: Unexpected token (31:4)
[0m [90m 29 | [39m
[90m 30 | [39m[33mReactDOM[39m[33m.[39mrender(
[31m[1m>[22m[39m[90m 31 | [39m [33m<[39m[33mProvider[39m store[33m=[39m{createStoreWithMiddleware(reducers)}[33m>[39m
[90m | [39m [31m[1m^[22m[39m
[90m 32 | [39m [33m<[39m[33mApp[39m [33m/[39m[33m>[39m
[90m 33 | [39m [33m<[39m[33m/[39m[33mProvider[39m[33m>[39m
[90m 34 | [39m [33m,[39m document[33m.[39mquerySelector([32m'.container'[39m))[33m;[39m[0m
at Object.106 (bundle.4bc8d06487c51394a532.js:71)
at __webpack_require__ (bundle.4bc8d06487c51394a532.js:20)
at 106 (bundle.4bc8d06487c51394a532.js:63)
at bundle.4bc8d06487c51394a532.js:66
这是我的主要文件：
webpack.config.js
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const extractSass = new ExtractTextPlugin({
filename: "styles.css",
});
const VENDOR_LIBS = [
'react', 'lodash', 'redux', 'react-redux', 'react-dom', 'react-input-range', 'redux-form', 'redux-thunk'
];
module.exports = {
entry: {
bundle: './src/index.js',
vendor: VENDOR_LIBS
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
},
{
test: /\.(scss)$/,
use: extractSass.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", // Used for Bootstrap JavaScript components
jQuery: "jquery", // Used for Bootstrap JavaScript components
Tether: 'tether',
Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
}),
extractSass
] };
.babelrc
{
"presets": ["babel-preset-env", "react"]
}
的package.json
{
"name": "app-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build": "webpack",
"serve": "webpack-dev-server"
},
"repository": "",
"author": "Edgar KAMDEM",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"jquery-ui-dist": "^1.12.1",
"lodash": "^4.17.4",
"mxgraph": "^3.8.0",
"popper.js": "^1.12.9",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-input-range": "^1.2.2",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.9",
"precss": "^2.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.7"
}
}
index.js
// Bootstrap dependencies
window.$ = window.jQuery = require('jquery') // required for bootstrap
window.Popper = require('popper.js') // required for tooltip, popup...
import 'bootstrap'
// import '../scss/main.scss' import it in prod
import './index.scss' // include bootstrap css file with own modifications
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4)
// use tooltip and popover components everywhere
$(function (){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
的index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app test</title>
<link rel="stylesheet" type="text/css" href="build/styles.css">
<link rel="stylesheet" href="external/jqueryui-ruler/css/jquery.ui.ruler.css">
</head>
<body >
<header >
</header>
<!-- Begin page content -->
<div role="main" class="container">
</div>
<footer>
</footer>
<script src="build/bundle.4bc8d06487c51394a532.js"></script>
<script src="build/vendor.b97aa871a1eeaedf871a.js"></script>
</body>
</html>
app.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div style="font-size: 40px">React simple starter</div>
);
}
}
它应该在html页面上显示“React simple starter”，但事实并非如此。
如果您想查看其他文件，请帮助并告诉我
PS：我对webpack很新
尝试将babel-preset-env和babel-preset-react添加到您的devDependencies并删除babel-preset-es2015：
yarn add -d babel-preset-env babel-preset-react或npm install -D babel-preset-env babel-preset-react
并改变你的.babelrc：
{
"presets": [
["react"],
["env"]
],
}
编辑：
尝试创建如下所示的redux商店：
const store = createStore(reducers) //assuming reducers is your combined reducers
...
<Provider store={store}>
代替 ：
const createStoreWithMiddleware = applyMiddleware()(createStore);
...
<Provider store={createStoreWithMiddleware(reducers)}>
OP中的错误似乎表明来自index.js的代码以相应的bundle中的编码格式结束。你确定index.js在代码const createStoreWithMiddleware = applyMiddleware()(createStore);上或之后使用了正确的字符吗？