title: material-ui in reactjs - @withStyles(styles) in react app giving Syntax error: Unexpected token > @withStyles(styles)
body: <p>I am new to React. </p>
  
  <p>This particular project includes material-ui and it runs fine in codesandbox. </p>
  
  <h3><a href="https://codesandbox.io/s/yv43ky8xox" rel="nofollow noreferrer">https://codesandbox.io/s/yv43ky8xox</a></h3>
  
  <p>But when I run it locally, its giving error at the below line. </p>
  
  <h3>Unexpected token > @withStyles(styles)</h3>
  
  <p>From my search at the source of the problem, I think the problems lies in my .babelrc configuration.</p>
  
  <pre><code>Failed to compile.
  
  ./src/App.js
  Syntax error: Unexpected token (43:0)
  
    41 | })
    42 | 
  &gt; 43 | @withStyles(styles)
  ```
  </code></pre>
  
  <h3>Locally I have tried running the project by both</h3>
  
  <h3>A) downloading the above codesandbox project and installing the exact packages from (<a href="https://codesandbox.io/s/yv43ky8xox" rel="nofollow noreferrer">https://codesandbox.io/s/yv43ky8xox</a>)  AND also</h3>
  
  <h3>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</h3>
  
  <h3>Here's the updated setup of the option B) above for running the project in my local machine</h3>
  
  <h2>package.json</h2>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <h2>.babelrc</h2>
  
  <pre><code>{
      "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"
          ]
        }
      }
    }
  </code></pre>
  
  <h2>And in local machine the code in .src/App.js remains just the as I have in codesandbox</h2>
  
  <p>(<a href="https://codesandbox.io/s/yv43ky8xox" rel="nofollow noreferrer">https://codesandbox.io/s/yv43ky8xox</a>)</p>
  
  <h3>Running this app in Google-Chrome |</h3>