Babel loader not loading form config.json file

Question

I am a beginner in using Reactjs and I get the following error when I run the webpack:

ERROR in ./src/client/app/index.jsx
Module parse failed: Unexpected token (6:11)
You may need an appropriate loader to handle this file type.

Code:

class App extends React.Component {
    render () {
        return <p> Hello React!</p>;
} }

I did this by following the instructions given as in the following site:

http://blog.tamizhvendan.in/blog/2015/11/23/a-beginner-guide-to-setup-react-dot-js-environment-using-babel-6-and-webpack/

below lines here will tell you the version details

"author": "",
"license": "ISC",

"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"

"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"

Answer 1

The guide you're following is pretty old, and the config object described in webpack.config.js is different now.

Replace:

module : {
  loaders : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel'
    }
  ]
}

... with:

module : {
  rules: [{
    test : /\.jsx?/,
    include : APP_DIR,
    use: 'babel-loader'
  }]
}

Then, find a newer guide :)

Or install an older version of webpack.