Search code examples
reactjsimportecmascript-6webpack-dev-serverwebpack-2

How to import bundle created in webpack?

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

  • Try

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

    You are not exporting Hello as default.

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