Source:  Twitter logo

I have a Project1 which is bundled through webpack. My requirement is that this bundle.js will be put on a CDN so that I can use the modules exported in Project 1 inside Project2.

Project 1 files ->


import React, { Component } from "react";

export default class Hello extends Component {

  render() {
    return (
      <h1>Hello World</h1>


export {Hello} from "./src/Hello.jsx";

I am creating a bundle named bundle.js and for demo purposes, instead of adding it in the CDN, I am simply copying this bundle.js(in same folder as App.jsx) and referring it in Project2.

Project 2 files ->


import React, { Component } from "react";
import Hello from "./bundle.js";

export default class App extends Component {
    render() {
        return (


import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./src/App.jsx";

    <App />,


<!doctype html>

    <meta charset="utf-8">
    <title>webpack 2 demo</title>

    <div id="root2">


I am trying to run Project2 using webpack-dev-server with HMR enabled but it gives errors in Google Chrome console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

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

  • Current versions of packages:

"react": "^15.4.2" "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2", "babel-core": "^6.24.0"

Am I doing Import in a wrong fashion? Or is there something wrong in Export? Please help.

Edit: Adding webpack.config.js for Project1 as Joe Clay suggested:

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'umd',
    library: 'Hello'
  devtool: 'eval-source-map',
  module: {
    rules: [
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
  resolve: {
    extensions: ['.js', '.jsx'],
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
      React: 'react'

In order to do this you need to update your webpack config to output a bundle that can be exported.

Your config needs to have these lines

    output: {
        libraryTarget: 'umd', // make the bundle export
        externals: {
            'react': { // import react from an external module so you don't have multiple instances
                'commonjs': 'react', 
                'amd': 'react'
            'react-dom': { // some versions of react had links to react-dom so its good to include this
                'commonjs': 'react-dom',
                'amd': 'react-dom'

It is important to note that if you are using create-react-app for your project you will need to eject your subproject to change your config

9 users liked answer #0dislike answer #09
megamit profile pic

This article helped me with creating an importable/exportable library that is bundled by webpack.

You need something like this in your webpack config file:

output: {
    path: __dirname + '/lib',
    filename: outputFile,
    library: libraryName,    // very important line
    libraryTarget: 'umd',    // very important line
    umdNamedDefine: true     // very important line
4 users liked answer #1dislike answer #14
xeiton profile pic


import {Hello} from "./bundle.js";

You are not exporting Hello as default.

export {Hello} from "./src/Hello.jsx";
3 users liked answer #2dislike answer #23
Yury Tarabanko profile pic
Yury Tarabanko

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).