reactjs - Webpack + Babel error -

i trying configure webpack , had , running, getting same error. i've combed through few other posts seem have been resolved correcting spelling/grammar errors, can't seem pinpoint wrong in code. there more serious happening?

error in ./src/components/app/app.js module parse failed: /users/desktop/fred/src/components/app/app.js unexpected token (7:11) may need appropriate loader handle file type. |  |   render() { |         return ( |           <h1>hello</h1>; |         ); |     }; |  @ ./src/index.js 3:0-39 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index 

here webpack.config:

var path = require("path"); var webpack = require("webpack"); var autoprefixer = require('autoprefixer'); var precss = require('precss');  module.exports = {   entry: [     'webpack-dev-server/client?http://localhost:8080',     'webpack/hot/only-dev-server',     './src/index'   ],   output: {     path: path.resolve(__dirname, 'build'),     publicpath: '/build/',     filename: "bundle.js"   },   resolve: {     extensions: ['*', '.js', '.jsx', '.png', '.json']   },   plugins: [     new webpack.hotmodulereplacementplugin(),     new webpack.noerrorsplugin(),     new webpack.loaderoptionsplugin({       options: {         context: __dirname,         postcss: [           autoprefixer         ]       }     })   ],   module: {     loaders: [       {         test: /\.js?$/,         exclude: /node_modules/,         loaders: ['react-hot-loader', 'babel-loader']       },       {         test: /\.jsx?$/,         loaders: ['react-hot-loader', 'babel-loader']       },       {         test: /\.scss$/,         loaders: ['style-loader', 'css-loader', 'postcss-loader']       },       {         test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,         loader: 'url-loader?limit=10000',       }     ],     rules: [       {         test: /\.css$/,         use: [ 'style-loader', 'css-loader' ]       }     ]   } }; 

my app.js:

import react, { component } 'react'; import s './app.scss';  class app extends component {    render() {     return (       <h1>hello</h1>;     );   };  }  export default app; 

my index.js:

import react 'react'; import { render } 'react-dom'; import app './components/app/app';  let element = react.createelement(app, {}); render(element, document.queryselector('.container')); 

my .babelrc:

{   "presets" : ["es2015", "react", "stage-0"] } 

and package.json:

{   "name": "fred test",   "version": "1.0.0",   "description": "a fred test",   "main": "index.js",   "scripts": {     "test": "echo \"error: no test specified\" && exit 1",     "start": "webpack-dev-server"   },   "author": "fred",   "license": "isc",   "devdependencies": {     "autoprefixer": "^6.7.7",     "babel-core": "^6.24.1",     "babel-loader": "^6.4.1",     "babel-preset-es2015": "^6.24.1",     "babel-preset-react": "^6.24.1",     "babel-preset-stage-0": "^6.24.1",     "css-loader": "^0.28.0",     "file-loader": "^0.11.1",     "postcss": "^5.2.17",     "postcss-loader": "^1.3.3",     "precss": "^1.4.0",     "react-hot-loader": "^1.3.1",     "style-loader": "^0.16.1",     "webpack": "^2.3.3",     "webpack-dev-server": "^2.4.2"   },   "dependencies": {     "normalize.css": "^6.0.0",     "react": "^15.5.4",     "react-dom": "^15.5.4"   } } 

the problem defined both module.rules , module.loaders. webpack ignores module.loaders (which exists compatibility reasons) whenever module.rules present. in case, javascript rules inside module.loaders, none of them being used.

to fix put inside module.rules. , have 2 rules .js files, /\.js?$/ matches .j , .js, because ? means 1 or 0 occurrences, /\.jsx?$/ matches .js , .jsx, want, , doesn't make sense have rule .j.

module: {   rules: [     {       test: /\.jsx?$/,       exclude: /node_modules/,       loaders: ['react-hot-loader', 'babel-loader']     },     {       test: /\.scss$/,       loaders: ['style-loader', 'css-loader', 'postcss-loader']     },     {       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,       loader: 'url-loader?limit=10000',     },     {       test: /\.css$/,       use: [ 'style-loader', 'css-loader' ]     }   ] }