How to import bundle created in webpack?

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

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

Try

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

You are not exporting Hello as default.

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