CODEWITHSUNDEEP
reactjswebpackbower
bsky
bsky

Reputation: 20222

Fail to set up project with webpack, babel

I am making a sample app using react, bower and webpack.

I have this index.jsx file:

import React from 'react';
import {ReactDOM} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';

    var App = React.createClass({
      render: function() {
        return (<p> Hello React!</p>);
      }
    });

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

I installed the following:

npm i babel-loader babel-preset-es2015 babel-preset-react -S

My webpack.config.js is:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  loaders : [
     {
       test : /\.jsx?/,
       loader: 'babel',
       include : APP_DIR,
       query: {
          presets: ['react', 'es2015']
       }
     }
   ]
};

module.exports = config;

My issues is that in the index.jsx file I am getting:

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

However, I've installed the bower packages and made bower the default loader.

Why does this still come up then?

Upvotes: 0

Views: 69

Answers (1)

omerts
omerts

Reputation: 8838

You need to put your loaders config under a "module" key.

...
output: {
  path: BUILD_DIR,
  filename: 'bundle.js'
},
module: {
  loaders: [{
    test: /\.jsx?/,
    loader: 'babel',
    include : APP_DIR,
     query: {
        presets: ['react', 'es2015']
     }
  }]
}
...

Upvotes: 2

Related Questions