reactjs中的material-ui-React应用中的@withStyles(styles)给出语法错误:意外令牌> @withStyles(styles)

时间:2018-07-27 14:04:59

标签: reactjs material-ui

我是React的新手。

此特定项目包括material-ui,并且在codeandbox中运行良好。

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)下载上面的codesandbox项目,并从(https://codesandbox.io/s/yv43ky8xox)安装确切的软件包,并且

B)在本地计算机中更新一些软件包(例如最新版本的React和material 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中的代码仍然与在codesandbox中的代码一样

https://codesandbox.io/s/yv43ky8xox

在Google-Chrome中运行此应用|

1 个答案:

答案 0 :(得分:1)

您尝试这样导出它

na.strings

代替使用export default withStyles(styles)(App) 吗?