Cannot import react, Uncaught SyntaxError, Unexpected Identifier

Question

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.

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:

.babelrc

{
  "presets":["env", "react"]
}

package.json

{
  "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": {}
}

webpack.config.js

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

Index.js

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(){
        <div>
            <SignIn />
        </div>
    }
}

ReactDOM.render(<App/>, document.getElementById('App'))

I will be very glad for your help.

@AkshayKhandelwal there is an only error: reactjs.org/docs/error-decoder.html?invariant=152&args[]=t — Alojzy Mucha
– Alojzy Mucha, Commented Mar 11, 2018 at 19:51

Matt · Accepted Answer · 2018-03-11 21:02:27Z

0

import is a es2015 feature and I see no es2015 preset in .babelrc. See: https://www.npmjs.com/package/babel-preset-es2015

answered Mar 11, 2018 at 21:02

Matt

1419 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey Avanesyan · Accepted Answer · 2018-03-11 21:58:56Z

0

Add presets into babel-loader. Change webpack.config.js in this way.

 {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use : {
      loader : 'babel-loader',
      options : {
          presets : ['env', 'react'],

      }
  }
},

answered Mar 11, 2018 at 21:58

Sergey Avanesyan

7646 silver badges9 bronze badges

Comments

Jayavel · Accepted Answer · 2018-03-14 12:39:07Z

0

Try this : transform-es2015-modules-amd , This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD). in .babelrc file

 {
    presets: ["env", "react"],
    plugins: ["transform-es2015-modules-amd"]
 }

more at transform-es2015-modules-amd

answered Mar 14, 2018 at 12:39

Jayavel

3,4072 gold badges26 silver badges37 bronze badges

Comments

NealWalters · Accepted Answer · 2020-08-17 20:48:26Z

0

This can also occur if you run:

node index.js

instead of

npm start

Collectives™ on Stack Overflow

Cannot import react, Uncaught SyntaxError, Unexpected Identifier

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related