我正在尝试第一次进行webpack构建,并且相对于文档,我已经多次查看了我的babel配置,但我不能为我的生活看到它的错误。所有相同的我在构建一个非常简单的应用程序(几乎是默认的应用程序,与redux连接)时收到错误:
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (10:2)
8 |
9 | ReactDOM.render(
> 10 | <Provider store={store}>
| ^
11 | <App />
12 | </Provider>, global.document.getElementById('root'));
13 | registerServiceWorker();
这是我的webpack.config.js
:
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new UglifyJSPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: [
'babel-loader'
]
}
]
}
};
我也使用了webpack文档建议的变体:
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
和我的package.json
:
{
"name": "interactor",
"version": "0.1.0",
"private": true,
"babel": {
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
},
"dependencies": {
"react": "^16.0.0",
"react-bootstrap": "^0.31.3",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-scripts": "1.0.14",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "webpack --config webpack.config.js",
"build": "webpack",
"test": "react-scripts test --env=jsdom"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"css-loader": "^0.28.7",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"file-loader": "^1.1.5",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^0.4.6",
"webpack": "^3.6.0"
}
}
我猜index.js也许有用:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, global.document.getElementById('root'));
registerServiceWorker();
我在这里做错了什么?
答案 0 :(得分:7)
像往常一样,用户错误,但也许它会帮助像我这样的另一个新手。永远不要把#34;做出反应&#34;进入我的babel预设。它应该看起来像,例如
"babel": {
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
}
哦,确保你确实安装了babel-preset-react
。