title: How do I import a react component through a HTML script tag?
body: <p><em>So I'm creating a react component which will be deployed with UMD format and can be consumed from unpkg. It is built using webpack.</em></p>
  
  <p>Webpack config creating the UMD module with external modules:</p>
  
  <pre><code>module.exports = {
       plugins: [
              new StyleLintPlugin(),
              new CleanWebpackPlugin(['../dist']),
              new ExtractTextPlugin("index.css")       
      ],
     resolve:{
       extensions: ["",".scss", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
     },
     module: {
          preLoaders: [
              {
                  test: /\.tsx$/,
                  loader: 'tslint-loader'
              }
         ],
         loaders: [
             { test: /\.scss$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader!sass-loader")},
             { test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader")},          
             { test: /\.tsx?$/, loader: "awesome-typescript-loader",exclude: /node_modules/,query:{declaration:false} },
             {
                 test: /\.(png|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                 loader: 'file-loader',
             }
         ]
     },
      devtool: 'source-map',
      output: {
          filename: '[name].js',
          path: path.resolve(__dirname,"..", 'dist'),
          library: 'productupload',
          libraryTarget: 'umd',
          umdNamedDefine: true,
          //publicPath: '/'
      }
      externals: {
        'react': 'commonjs react', 
        'react-dom':'commonjs react-dom',
        'mongodb':'commonjs mongodb',
        'express':'commonjs express'
      }
  };
  </code></pre>
  
  <p>This then creates the package you can see <a href="https://unpkg.com/@mortonprod/product-upload@1.0.1/dist/inputBuilder.js" rel="nofollow noreferrer">here</a></p>
  
  <p>And I try to get the react component with the HTML:</p>
  
  <pre><code>            &lt;!DOCTYPE html&gt;
              &lt;html lang="en"&gt;
              &lt;head&gt;
              &lt;meta charset="UTF-8"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;title&gt;Upload Component&lt;/title&gt;
              &lt;meta name="description" content="It will upload generic product data to server."&gt;
              &lt;meta name="author" content="Alexander Morton"&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://unpkg.com/@mortonprod/product-upload@1.0.1/dist/inputBuilder.min.js"&gt;&lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;div id="root"&gt;&lt;/div&gt;
              &lt;section&gt;
              &lt;/section&gt;
              &lt;footer&gt;
                  Product Upload component create by Alexander Morton
              &lt;/footer&gt;
              &lt;script&gt;window.__IDS__ = ${ids}&lt;/script&gt;
              &lt;script src= ${options.unpkgUI}&gt;&lt;/script&gt;
              &lt;script type="text/babel"&gt;
                  ReactDOM.render(
                      &lt;InputBuilder/&gt;,
                      document.getElementById('root')
                  );
              &lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>This should include react, react-dom and my component and then render it to the screen. </p>
  
  <p>The error I get is:</p>
  
  <blockquote>
    <p>inputBuilder.min.js:1 Uncaught ReferenceError: require is not defined
        at Object.r.<strong>extends.Object.setPrototypeOf.__proto</strong> (inputBuilder.min.js:1)
        at e (inputBuilder.min.js:1)
        at Object. (inputBuilder.min.js:1)
        at e (inputBuilder.min.js:1)
        at i.<strong>extends.Object.setPrototypeOf.__proto</strong> (inputBuilder.min.js:1)
        at inputBuilder.min.js:1
        at inputBuilder.min.js:1</p>
  </blockquote>
  
  <p><strong>Require should not be defined in the browser right? Why does webpack use it then?</strong></p>