webpack 4 TypeError: "Object(...) is not a function"

Question

I have a simple js file that I am trying to use webpack 4 with:

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 => {
    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;
}

My Javascript is pretty simple, only 1 function. It works if I remove the import and export statements to make it plain js and include it in <script> tags

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()
        }
...

However, when I webpack it with webpack 4 and include the resulting script with <script> tags I get:

TypeError: "Object(...) is not a function"

This is causing it - it is part of the webpack generated code:

scope.cytoscape = Object(cytoscape__WEBPACK_IMPORTED_MODULE_0__["cytoscape"])({
                container: scope.container,
                elements: scope.elements,
                style: scope.style,
                layout: scope.layout
            });

How do I configure webpack to simply create a Javascript file that I can include with a script tag?

Answer 1

Exports shouldn't be a function expression. It should be an object.

module.exports = {}

Not

module.exports = () => {}

I've seen people use functions, but not function expressions.

module.exports = function(env) {
    return {};
}

Answer 2

This answer does not address the OP's exact issue, but does highlight one potential cause of the error in question. In regards to Object(...) is not a function, I've encountered that error using CommonJS modules with Webpack when I exported the result of a function invocation as opposed to a reference to the function itself. Below is an example of code that will result in this error.

module.js

function Init() {
    // function body here...
}

exports.Init = Init();

main.js

import { Init } from 'module.js'
Init();

If you change the export in module.js to the code below, it fixes the issue.

exports.Init = Init;