How to import bundle created in webpack?

reactjs import ecmascript-6 webpack-dev-server webpack-2

11,077

Solution 1

Try

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

You are not exporting Hello as default.

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

Solution 2

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

Solution 3

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

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

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
  },

11,077

Peter Burns

Stack Overflow Valued Associate #00001 Wondering how our software development process works? Take a look! Find me on twitter, or read my blog. Don't say I didn't warn you because I totally did. However, I no longer work at Stack Exchange, Inc. I'll miss you all. Well, some of you, anyway. :)

Updated on September 15, 2022

Comments

Peter Burns over 1 year

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 ->

Hello.jsx:

import React, { Component } from "react";

export default class Hello extends Component {

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

index.js:

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 ->

App.jsx:

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

export default class App extends Component {
    render() {
        return (
            <Hello/>
        );
    }
}

index.js:

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

ReactDOM.render(
    <App />,
    document.getElementById("root2")
);

index.html:

<!doctype html>
<html>

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

<body>
    <div id="root2">
    </div>
</body>

</html>

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'
    })
  ],
};

xeiton over 5 years

Your solution helped me ! Thank you so much for sharing this.
Krisztián Balla over 2 years

Thanks! In case you are developing a node project and not a web project you will also run into this: stackoverflow.com/questions/64639839/…