11

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' }) ], };
Improve this question
2
  • Can you please include the webpack.config.js for Project1? Commented Mar 22, 2017 at 10:46
  • what you need to do is import { Hello } from './bundle' Commented Mar 22, 2017 at 10:48

3 Answers 3

Reset to default
10

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

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

2 Comments

Your solution helped me ! Thank you so much for sharing this.
Thanks! In case you are developing a node project and not a web project you will also run into this: stackoverflow.com/questions/64639839/…
4

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 },
Improve this answer

Comments

3

Try

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

You are not exporting Hello as default.

export {Hello} from "./src/Hello.jsx";
Improve this answer

Comments