React JSX Question

React + Webpack - Invariant Violation Error in simple Hello World component

So far I have managed to finally figure out how to configure my webpack.config.js file to handle jsx files. here it is:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'

module.exports = {
entry: [
output: {
path: __dirname + '/dist',
filename: "index_bundle.jsx"
module: {
loaders: [
{test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader", query: {presets: ['react', 'es2015']}}
resolve: {
extensions: ['','.js', '.jsx']
plugins: [HtmlWebpackPluginConfig]

And what I am trying to do is render a very simple react component with a react-bootstrap button:


import React from 'react';
import { Button } from 'react-bootstrap';

export default React.createClass({
getInitialState: function() {
return {
spanish: false
handleClick: function() {
this.setState({spanish: true});
render: function() {
const text = this.state.spanish ? 'Hola Mundo!' : 'Hello World';
const buttonText = this.state.spanish ? 'Click Para Cambiar a Ingl├ęs' : 'Click to Swith To Spanish';
return (
<Button onClick={this.handleClick}>{buttonText}</Button>

And here is the entry point for the application:


import React from 'react';
import ReactDOM from 'react-dom';
import { HelloWorld } from './components/HelloWorld';

<HelloWorld />,

Here is package.json:

"name": "soundcloud-player",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"production": "webpack -p",
"start": "webpack-dev-server"
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.15.1",
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"ejs": "^2.5.2",
"express": "^4.14.0",
"react": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0"
"devDependencies": {
"babel-loader": "^6.2.5",
"html-webpack-plugin": "^2.22.0",
"http-server": "^0.9.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"

Now I have two issues happening here, and I have no clue why it's happening:

  1. When I go to localhost:8080, I get an invariant violation error and a warning:

    index_bundle.jsx:1300 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

    Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  2. When I remove the 'resolve' part of my webpack.config.js, all of a sudden the project is unable to find my ./components/HelloWorld component and throws a lot of errors

For the first issue, I've tried using {} when importing components, but to no avail. The second issue is a mystery to me, as I believe it should fetch all jsx files because i've specified that in the 'test' part of my loaders. Can someone please help me figure out what is wrong with my project? Thank you.

Answer Source

You are getting a bit confused about the different import types in ES6. When you export default a class or variable, you must import it without using braces. For example:


class X {


export default X;


import X from 'A.js';

On the other hand, if you export something without setting it as default, you must use the braces (e.g. import { X } from 'A.js';, if I hadn't set it as a default export).

To understand why this works, it helps to see what happens in ES5 syntax. A default export essentially translates to this:

module.exports = MyExportedClass;

Then, when you import it, import MyExportedClass from 'A.js'; translates to:

var MyExportedClass = require('A.js');

Non-default exports are actually named properties in an object:

export class X {


Translates to:

module.exports = {
    X: /* translated class */

As for your second issue, removing the resolve line will reset it to the default values: ["", ".webpack.js", ".web.js", ".js"]. This is specified in the documentation.

By removing .jsx from the recognised extensions, Webpack will not look for .jsx files unless you explicitly include the extension.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download