【发布时间】：2019-01-04 16:19:15
【问题描述】：
我是 React 新手。
这个特定的项目包括material-ui，它在codesandbox中运行良好。
https://codesandbox.io/s/yv43ky8xox
但是当我在本地运行它时，它在下面一行给出错误。
意外标记 > @withStyles(styles)
从我对问题根源的搜索来看，我认为问题在于我的 .babelrc 配置。
Failed to compile.
./src/App.js
Syntax error: Unexpected token (43:0)
41 | })
42 |
> 43 | @withStyles(styles)
```
我在本地尝试过运行项目
A) 下载上述代码沙盒项目并从 (https://codesandbox.io/s/yv43ky8xox) 安装确切的包，并且还
B) 在本地机器上更新一些包（例如最新版本的 React 和材料 material-ui/core）并包括额外的文件，例如 .babelrc
这是上面选项 B) 的更新设置，用于在我的本地计算机上运行项目
package.json
{
"name": "new",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"@material-ui/core": "^1.4.1",
"@material-ui/icons": "^1.1.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"material-ui": "^1.0.0-beta.47",
"postcss-loader": "^2.1.6",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-scripts": "1.1.4",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"node": 6
},
"useBuiltIns": true
}
],
"es2015",
"stage-0",
"react"
],
"plugins": [
"add-module-exports",
["direct-import", ["@material-ui/core", "@material-ui/icons"]]
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
"babel-plugin-dev-expression"
]
},
"development": {
"plugins": [
"transform-class-properties",
"transform-es2015-classes",
"react-hot-loader/babel"
]
}
}
}
在本地机器中，.src/App.js 中的代码与我在代码框中的代码保持一致
(https://codesandbox.io/s/yv43ky8xox)
在 Google-Chrome 中运行这个应用程序 |
【问题讨论】：
-
create-react-app默认不支持装饰器，因为它们仍处于提案状态，而不是官方标准的一部分。您需要安装babel-plugin-transform-decorators。 -
安装了 babel-plugin-transform-decorators - 没有解决问题
-
还需要配置 babel 才能使用。这可能只有在您弹出项目并创建自定义
.babelrc时才有效。
标签： reactjs material-ui