Webpack not bundling node modules imported in dependency JS files

Question

I'm using Webpack to bundle my ReactJS application.

helloworld.js

import React from 'react';

export default class HelloWorld extends React.Component {
    render() {
        return <h2>Hello {this.props.name}!</h2>;
    }
}

index.js

import ReactDOM from 'react-dom';
import HelloWorld from './helloworld';

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

webpack.config.js

module.exports = {
    entry: './index.js',
    output: 'bundle.js',
    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

When I run webpack-dev-server --progress --colors I'm getting an error in the browser "React is not defined" but if I import React directly in the index.js then the error not comes. Why Webpack is not including React in the bundle if it is referenced in the helloworld.js file?

Shubham Khatri · Accepted Answer · 2016-07-06 08:34:11Z

1

Well webpack only tries to bundle up the individual modules by reading the dependencies in it and resolving them to render a particular element. Now while bundling

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

ReactDOM tries to execute React.createElement(_Helloworld2.default, { name: 'World' }), document.getElementById('app') function which requires React as a dependency that is not present in your index.js file so it gives an error and solve the issue when you import React in your index.js file. I hope I was able to explain and my answer helps you.

answered Jul 6, 2016 at 8:34

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin · Accepted Answer · 2016-07-06 08:58:00Z

1

You are missing import React from 'react'; statement. You will need it every time You write some JSX in a file, because it is transformed into React.createElement(..) function calls.

answered Jul 6, 2016 at 8:58

Martin

255 bronze badges

Collectives™ on Stack Overflow

Webpack not bundling node modules imported in dependency JS files

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related