material-ui in reactjs - @withStyles(styles) in react app giving Syntax error: Unexpected token > @withStyles(styles)

Question

I am new to React.

This particular project includes material-ui and it runs fine in codesandbox.

https://codesandbox.io/s/yv43ky8xox

But when I run it locally, its giving error at the below line.

Unexpected token > @withStyles(styles)

From my search at the source of the problem, I think the problems lies in my .babelrc configuration.

Failed to compile.

./src/App.js
Syntax error: Unexpected token (43:0)

  41 | })
  42 | 
> 43 | @withStyles(styles)
```

Locally I have tried running the project by both

A) downloading the above codesandbox project and installing the exact packages from (https://codesandbox.io/s/yv43ky8xox) AND also

B) In Local machine updating some of the packages (like the latest version of React and material material-ui/core) and including extra files such as .babelrc

Here's the updated setup of the option B) above for running the project in my local machine

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"
        ]
      }
    }
  }

And in local machine the code in .src/App.js remains just the as I have in codesandbox

(https://codesandbox.io/s/yv43ky8xox)

Running this app in Google-Chrome |

create-react-app does not support decorators by default because they are still just in proposal status and not part of the official standard. You will need to install the babel-plugin-transform-decorators. — trixn
installed babel-plugin-transform-decorators – didn't solve the issue — Rohan_Paul
You also need to configure babel to use it. This will probably only work, if you eject your project and create a custom .babelrc. — trixn

Jayffe Jayffe · Accepted Answer · 2018-07-27T14:13:44

Did you try to export it like this

export default withStyles(styles)(App)

instead of using @withStyle ?