title: webpack 4 TypeError: "Object(...) is not a function"
body: <p>I have a simple js file that I am trying to use webpack 4 with:</p>
  
  <pre><code>const CopyPlugin = require('copy-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  //const ClosurePlugin = require('closure-webpack-plugin')
  const path = require('path');
  
  module.exports = env =&gt; {
      console.log("Building with env", env)
      const config = {
          entry: {
              index: './src/index.js',
              "network-mapper": './src/network-mapper/network-mapper.js'
          },
          externals: {
              'angular': 'angular',
              'cytoscape': 'cytoscape'
          },
          output: {
              filename: '[name].[contenthash].js',
              path: path.resolve(__dirname, 'dist'),
              libraryTarget: 'umd'
          },
          module: {
              rules: [
                  {
                      test: /\.css$/,
                      use: ['style-loader', 'css-loader'],
                  },
                  {
                      test: /\.(html)$/,
                      use: {
                          loader: 'html-loader',
                      }
                  },
                  {
                      test: /\.js$/,
                      exclude: /node_modules/,
                      //loader: 'babel-loader'
                  }
              ]
          },
          plugins: [
              new CleanWebpackPlugin(),
              new HtmlWebpackPlugin({
                  template: __dirname + '/src/public/index.html',
                  filename: 'index.html',
                  inject: 'body'
              }),
              new CopyPlugin([
                  {from: __dirname + '/src/public'}
              ])
          ],
          optimization: {
              // We no not want to minimize our code.
              minimize: false
          }
      };
      config.mode = (env.development === 'false' ? 'production' : 'development')
  
      if (env.development === 'false') {
          // config.optimization = {
          //     concatenateModules: false,
          //     minimizer: [
          //         new ClosurePlugin({mode: 'AGGRESSIVE_BUNDLE'}, {
          //             // compiler flags here
          //             //
          //             // for debuging help, try these:
          //             //
          //             // formatting: 'PRETTY_PRINT'
          //             // debug: true,
          //             // renaming: false
          //         })
          //     ]
          // }
      }
      return config;
  }
  </code></pre>
  
  <p>My Javascript is pretty simple, only 1 function. It works if I remove the <code>import</code> and <code>export</code> statements to make it plain js and include it in <code>&lt;script&gt;</code> tags</p>
  
  <pre><code>import {cytoscape} from "cytoscape";
  
  export function networkMap() {
  // TODO
      var createNetworkType = function (id, color, description) {
          return {
              "id": id,
              "label": color.charAt(0).toUpperCase() + color.slice(1).toLowerCase(),
              "description": description,
              "className": color.toLowerCase()
          }
  ...
  </code></pre>
  
  <p>However, when I webpack it with webpack 4 and include the resulting script with <code>&lt;script&gt;</code> tags I get:</p>
  
  <p><code>TypeError: "Object(...) is not a function"</code></p>
  
  <p>This is causing it - it is part of the webpack generated code:</p>
  
  <pre><code>scope.cytoscape = Object(cytoscape__WEBPACK_IMPORTED_MODULE_0__["cytoscape"])({
                  container: scope.container,
                  elements: scope.elements,
                  style: scope.style,
                  layout: scope.layout
              });
  </code></pre>
  
  <p>How do I configure webpack to simply create a Javascript file that I can include with a script tag?</p>