0

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"
halfer
  • 19,824
  • 17
  • 99
  • 186
Abhijith Neil Abraham
  • 13
  • 2
  • This guide was created with babel v2 probably. With v3 onwards the way `loaders` are defined are changed. Refer [webpack docs](https://webpack.js.org/concepts/) for latest config. – Hozefa Mar 04 '18 at 04:21
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Mar 04 '18 at 19:45

1 Answers1

0

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.

ccjmne
  • 9,333
  • 3
  • 47
  • 62
  • That still didnt solve the problem .Any alternative? – Abhijith Neil Abraham Mar 04 '18 at 06:06
  • 1
    @Abhijith: you have not supplied any new information for your helper to go on. Remember that you are the eyes and ears on the problem, and if you genuinely want help, readers will want to know _how_ it did not work and what things you noticed when trying something. In general, they also would like for people they help to provide this detailed response without the need for any prompting. Can you consider this answer as a jumping-off point for new research, rather than something that can be typed in verbatim? Maybe it will help you a good part of the way. Are there logs, for example? – halfer Mar 04 '18 at 19:44