webpack issue when trying to render in reactjs

Question

Hi I am a newbie in react js and was trying to build an quiz application..When trying to do so I am getting an error when the render is getting called..

The below is the webpack.config file:-

module.exports = {
  entry: {
    app: './src/index.js'
  },

  // Add resolve.extensions.
  // '' is needed to allow imports without an extension.
  // Note the .'s before extensions as it will fail to match without!!!
  resolve: {
    extensions: ['', '.js', '.jsx', '.es6.js']
  },

  output: {
    path: __dirname,
    filename: 'app/js/main.js'
  },
  module: {
    loader: [
//      {
//        test: /\.css$/,
//        loaders: ['style', 'css'],
//       // include: PATHS.app
//
//      },
      // Set up jsx. This accepts js too thanks to RegExp
     {
  test: /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
 presets:['es2015','react'],
  loader: 'jsx-loader'
//  query: {
//    presets: ['react']
//        }
     }
    ]
  }
};

The following is my index.js file:-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

//React.createElement(People, {})

the following is my App.jsx:-

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component{
    render(){
        return(
        <div>Appppppoihj</div>
        )
    }

}

export default App

The most interesting part is that I am getting an error in my index.js file while I am trying to call renderDOM.render..

The issue I am getting is :-

ERROR in ./src/index.js
Module parse failed: C:\Users\Th\Desktop\ReactJs_Master\src\index.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:4)

The following is my package.json:-

{
  "name": "react_quiz",
  "version": "1.0.0",
  "description": "quiz with the help of reactjs",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pratham",
  "license": "ISC",
  "devDependencies":{
      "babel-core":"5.8.*",
      "babel-loader":"5.3.*",
      "webpack":"1.12.*"
  },
  "dependencies":{
      "react":"15.0.1",
      "react-dom":"15.0.1"
  }
}

I have tried out all different websites and solutions on this website but none of them is helping me so far..The error is coming at < in the app component when calling reactDOM.render

I would of much help if any of you all could help me out as I am stuck for a long time on this and not getting any sort of solution for this..

Thanks a lot for the help.

one of the reasons I was getting this is because of the npm modules I had installed before hand..As @alexander pointed out I removed the npm module and used the commands and the code changes he has recommended below..It worked out for me — SemperFi
– SemperFi, Commented Apr 27, 2016 at 4:35

Oleksandr T. · Accepted Answer · 2016-04-26 14:54:16Z

2

Instead of jsx-loader try use babel-loader

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

Note - Make sure that you have installed these packages

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

Update

also you can move presets option from webpack.config to .babelrc

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

edited Apr 26, 2016 at 14:54

answered Apr 26, 2016 at 14:09

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Collectives™ on Stack Overflow

webpack issue when trying to render in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related