React and webpack appropriate loader error

Question

Hi I'm new in react I just starting to learn reactjs. I have some problems and i don't know how to fix it.

This is my package.json file

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "5.8.*",
    "babel-loader": "5.3.*",
    "react": "0.13.*",
    "webpack": "1.12.*",
    "webpack-dev-server": "1.10.*"
  }
}

webpack.config,js file

module.exports = {
    entry: [
        './src/App.js'
    ],
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loader: [{
            test: /\.jsx?$/,
            loader: 'babel'
        }]
    }
};

and app.js file

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>alo</h1>
            </div>
        )
    }
}

React.render(<App />, document.getElementById('app'));

and the error when I run webpack

ERROR in ./src/App.js
Module parse failed: C:\Users\mkrtc\Desktop\react\src\App.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| class App extends React.Component {
 @ multi main

Typo. It should be `loaders: [...` instead of `loader: [...` — Yuya, May 02 '16 at 14:15
ok after that give this error ERROR in ./src/App.js Module build failed: SyntaxError: C:/Users/mkrtc/Desktop/react/src/App.js: Unexpected token (6:3) 4 | render() { 5 | return ( > 6 |
| ^ 7 |
alo
8 |
9 | ) — Aram Mkrtchyan, May 02 '16 at 14:19
Possibly duplicate http://stackoverflow.com/questions/36964724/webpack-is-not-finding-my-imports-or-converting-my-es6-code/36964951#36964951 — Debabrata Mohanta, May 02 '16 at 14:20
http://stackoverflow.com/questions/33509770/react-babel-webpack-not-parsing-jsx-code — Yuya, May 02 '16 at 14:28
Install the loader preset to compile react code. [read this, it could help to understand additional configuration for using react babel with webpack](https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html) — Damien Leroux, May 02 '16 at 15:09
I recommend this tutorial http://survivejs.com/webpack_react/webpack_and_react/ Working source code included. — vegazz, May 02 '16 at 16:20

score 0 · Answer 1 · answered May 02 '16 at 23:45

You need to set up your babel configuration. Unlike babel 5, Babel 6 doesn't do anything out of the box. plugins and presets need to set. Create a .bablerc file at the root level like this:

"presets": [
  "react",
  "stage-0"
],

this enables the features from presets react and stage-0

React and webpack appropriate loader error

alo

1 Answers1