problem description
in the process of creating a project, the decorator syntax always indicates that it cannot be parsed
what methods have you tried
found a lot of configuration methods for supporting modifiers on the Internet, and there are a lot of them right away. Here is the code, but it always reports an error
.related codes
.babelrc
{
"presets": ["env","react"],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}.package.json
{
"name": "mobx-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"mobx": "^5.0.3",
"mobx-react": "^5.2.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"webpack": "^4.16.1",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"start": "webpack-dev-server --mode development --config build/webpack.config.js",
"dev": "webpack --mode development --config build/webpack.config.js",
"build": "webpack --mode production --config build/webpack.config.js"
},
"devDependencies": {
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-env": "^1.7.0",
"babel-preset-mobx": "^1.0.3",
"html-webpack-plugin": "^3.2.0",
"webpack-cli": "^3.0.8"
},
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
error code
ERROR in ./src/entry/main.js 8:4
Module parse failed: Unexpected character "@" (8:4)
You may need an appropriate loader to handle this file type.
| class Todo {
| // id = Math.random();
> @observable title;
| @observable finished = false;
| constructor(title){
@ multi (webpack)-dev-server/client?http://localhost:8081 ./src/entry/main.js main[1]
what result do you expect?
I hope that God can guide me to see if there is something wrong with my configuration, or if he can guide me to create a new react+webpack+mobx project in as much detail from scratch as possible. no, no, no.