reactjs - You may need an appropriate loader to handle this file type. with webpack -

following great tutorial -https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack - trying learn react.

the source code looks this:

import react 'react'; import {render} 'react-dom';  class app extends react.component {   render () {     return <p> hello react!</p>;   } }  render(<app/>, document.getelementbyid('app')); 

then making bundle via webpack -d , following webpack.config.js:

var webpack = require('webpack'); var path = require('path');  var build_dir = path.resolve(__dirname, 'client/public'); var app_dir = path.resolve(__dirname, 'client/app');      var config = {         entry: app_dir + '/index.jsx',         output: {             path: build_dir,             filename: 'bundle.js'         },          loaders : [             {                 test : /\.jsx?/, // files processed - *.js , *.jsx                 include : app_dir, // *.js , *.jsx                 loader : 'babel' // folder name             }         ]     };      module.exports = config; 

the bundle end error:

module parse failed: c:\dev\pat\poc-mern\client\app\index.jsx unexpected token (6:15) may need appropriate loader handle file type.

 class app extends react.component {       render(){           return <p> hello react!</p>;  <---- line      }  } 

i believe it's trivial. don't see it. have ideas?

i had wrape loader: in module aka

module: {         loaders: [             {                 test: /\.jsx?/, // files processed - *.js , *.jsx                 include: app_dir, // *.js , *.jsx                 loader: 'babel' // folder name             }         ]     }