title: Cannot import react, Uncaught SyntaxError, Unexpected Identifier
body: <p>I have a following problem. I setted up a React in my ASP.NET Core application as always, but now I have one irritating problem and I don't know how to fix it.</p>
  
  <p>When I try to import react from 'react', nothing import. In Chrome Developer Tools I see a red underline under the sentene: "import React from 'react';".
  I tried to change babel presets to another, change a webpack.config.js file but nothing works. Maybe you will have an idea, where is a bug? Here is my files:</p>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets":["env", "react"]
  }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "MyApp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.4",
      "babel-preset-env": "^1.6.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.10",
      "extract-text-webpack-plugin": "^4.0.0-beta.0",
      "node-sass": "^4.7.2",
      "prop-types": "^15.6.1",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "sass-loader": "^6.0.7",
      "style-loader": "^0.20.3",
      "webpack": "^4.1.1",
      "webpack-dev-server": "^3.1.1"
    },
    "dependencies": {}
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
   devtool: 'source-map',
   entry: './ClientApp/index.js',
   output: {
      publicPath: "/js/",
      path: path.join(__dirname, "wwwroot", "js"),
      filename: "index-bundle.js"
   },
   devServer: {
    contentBase: "./dist"
   },
   module: {
     rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
    },
       {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
       },
         {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
          use: [
              {
                  loader: 'url-loader',
                  options: {
                      limit: 50000,
                      name: 'assets/[name]_[hash].[ext]'
                  }
              }
          ]
       },
       {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
     ]
   },
   plugins: [
      new ExtractTextPlugin("./bundle.css")
    ]
  }
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './Shared/styles/styles.scss';
  
  import SignIn from './Sign/Shared/Components/Sign'
  
  class App extends React.Component{
      constructor(props){
          super(props);
          this.state = {
  
          }
      }
      render(){
          &lt;div&gt;
              &lt;SignIn /&gt;
          &lt;/div&gt;
      }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('App'))
  </code></pre>
  
  <p>I will be very glad for your help.</p>