ES6 Module loading with Webpack and Babel Issue

Question

My compiled jsx module scripts are not compiling for some reason.

Here is the directory structure

• dist
  • bundle.js
• node_modules
• scripts
  • helloWorldComponent
    • helloWorldBox.jsx
    • helloWorldDisplay.jsx
  • main.js
• index.html
• package.json
• webpack.config.js

Here are my 2 jsx files

• helloWorldBox.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import helloWorldDisplay from './helloWorldDisplay.jsx';

var helloWorldBox = React.createClass({
	render : function(){
		return (
			<div>
				<helloWorldDisplay/>
			</div>
		);
	}
});

ReactDOM.render(<helloWorldBox/>, document.getElementById('output'));

• helloWorldDisplay.jsx

import React from 'react';

var helloWorldDisplay = React.createClass({
	render : function(){
		return (
			<div>
			   Hello World
			</div>
		);
	}
});

• main.js file

import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx';
import helloWorldDisplay from './helloWorldComponent/helloWorldDisplay.jsx';

When my bundle.js gets created by webpack it looks like this

/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

	import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx';
	import helloWorldDisplay from './helloWorldComponent/helloWorldDisplay.jsx';

/***/ }
/******/ ]);

Here is the webpack.config.js file

var path = require('path');
var webpack = require('webpack');
 
module.exports = {
  entry: './scripts/main.js',
  output: { path: __dirname + '/dist', filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

Answer 1

import React from 'react';

var helloWorldDisplay = React.createClass({
    render : function(){
        return (
            <div>
               Hello World
            </div>
        );
    }
});

export default helloWorldDisplay

Add the export helloworldDisplay file