problem description
I built a react project using webpack and always reported when using redux. Syntax error
ERROR in ./src/reducer.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (10:15)
8 | switch (action.type) {
9 | case "CHANGE_COLOR":
> 10 | return { ...state, themeColor: action.themeColor };
| ^
11 | default:
12 | return state;
13 | }
@ ./src/index.js 19:15-35
the environmental background of the problems and what methods you have tried
webpack.config.js
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"), //,__dirname, ../, ./
output: {
path: path.resolve(__dirname, "./dist"), //
filename: "bundle.js" //
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
}package.json
{
"name": "first-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "node bin/dev-server -open"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"webpack-dev-server": "^3.1.9"
},
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1"
}
}related codes
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore } from "redux";
import { Provider } from "react-redux";
import themeReducer from "./reducer";
const store = createStore(themeReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("app"));App.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
class App extends Component {
static propTypes = {
themeColor: PropTypes.string
};
render() {
return (
<div style={{ color: this.props.themeColor }}>Hello React! xixi</div>
);
}
}
const mapStateToProps = (state) => {
return {
themeColor: state.themeColor
};
}
Header = connect(mapStateToProps)(Header);
export default App;reducer.js
//reducer.js
const themeReducer = (state, action) => {
if (!state) {
return {
themeColor: "red"
};
}
switch (action.type) {
case "CHANGE_COLOR":
return { ...state, themeColor: action.themeColor };
default:
return state;
}
}
export default themeReducer;what result do you expect? What is the error message actually seen?
how can I solve this kind of error? the same code runs perfectly in the project built by create-react-app.
the error message is as follows
ERROR in ./src/reducer.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (10:15)
8 | switch (action.type) {
9 | case "CHANGE_COLOR":
> 10 | return { ...state, themeColor: action.themeColor };
| ^
11 | default:
12 | return state;
13 | }
@ ./src/index.js 19:15-35