React - Module parse failed

Question

I've got this error all day when running webpack from command line:

ERROR in ./index.js
Module parse failed: /home/kuro/Workspace/ExpressJS/corate/src/index.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render:function(){      
|       return (
|           <div>
|               <div className="left">
|                   <img src={mac}/>

Here is my code in index.js

var React=require('react');
var ReactDOM=require('react-dom');
var style=require('../public/css/style.css');
var mac=require('../public/images/img_landing_page_mac.png');
var chrome=require('../public/images/btn_get_chrome.png');

var Content=React.createClass({
    render:function(){      
        return (
            <div>
                <div className="left">
                    <img src={mac}/>
                </div>
                <div className="right">
                    <h2 style={font-size: '33px', letter-spacing: '5px'}>
                        Organize <br>Modern Knowledge<br> for Mankind
                    </h2>
                    <p style={font-size: '20px', margin-top: '35px', letter-spacing: '4px'}>
                        Consume, Colect and Revisit <br>Knowledge at Your Fingertips
                    </p>
                    <a href="#" style={margin-top: '80px', display: 'inline-block', margin-left: '-17px'}>
                        <img src={chrome}/>
                    </a>
                </div>
            </div>
        );
    }
});

ReactDOM.render(<Content/>,document.getElementByClassName('container'));

And configuration in webpack.config.js:

module.exports={
    context: __dirname+'/src',
    entry:'./index.js',
    output:{
        path:__dirname+'/static',
        filename:'bundle.js'
    },
    module:{
        loaders:[
        {
            test:/\.png$/,
            loader:'url?limit=10000'
        },
        {
            test:/\.jpg$/,
            loader:'url?limit=10000'
        },
        {
            test:/\.css$/,
            loader:'style!css'
        }
        ]
    }
}

I couldn't figure out what is wrong with it. Am I missing something here?

Oleksandr T. · Accepted Answer · 2019-08-16 14:08:30Z

15

You need add babel-loader, with react preset, do the following steps

npm i --save-dev babel-loader babel-preset-react babel-preset-es2015

add to webpack.config.js configs for babel-loader ( to loaders: [..] section)

{  
   test: /\.jsx?$/,
   exclude: /(node_modules)/,
   loader: 'babel',
   query: {
      presets: ['react', 'es2015']
   }
}

Update: babel-preset-es2015, babel-preset-react was deprecated in favor of using @babel/env and @babel/preset-react

npm i --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env
add to webpack.config.js configs for babel-loader

  rules: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]

edited Aug 16, 2019 at 14:08

answered Feb 18, 2016 at 15:48

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

Manuel Fash · Accepted Answer · 2020-08-23 02:26:36Z

0

well mate . this worked

    module: {
       rules: [
        // CSS loader here
        {
         test: /\.svg$/,
           use: 'file-loader'
         }
            ]
    }

add this to your webpack config files npm install --save-dev style-loader css-loader

answered Aug 23, 2020 at 2:26

Manuel Fash

213 bronze badges

1 Comment

Manuel Fash Over a year ago

but be sure to run this : npm install --save-dev style-loader css-loader

Collectives™ on Stack Overflow

React - Module parse failed

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related