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

Question

我有一个简单的 js 文件，我正在尝试将 webpack 4 用于：

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

我的Javascript很简单，只有1个功能。如果我删除 import 和 export 语句以使其成为普通 js 并将其包含在 <script> 标签

中，它就会起作用

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

但是，当我使用 webpack 4 对其进行 webpack 并将生成的脚本包含在 <script> 标签中时，我得到：

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

这是造成它的原因 - 它是 webpack 生成代码的一部分：

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

我如何配置 webpack 来简单地创建一个 Javascript 文件，我可以用脚本标签包含它？

Answer 1

此答案并未解决 OP 的确切问题，但确实强调了相关错误的一个潜在原因。 关于 Object(...) is not a function，我遇到过当我导出函数调用的结果而不是对函数本身的引用时，将 CommonJS 模块与 Webpack 结合使用时出现该错误。下面是将导致此错误的代码示例。

module.js

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

exports.Init = Init();

main.js

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

如果您将 module.js 中的导出更改为下面的代码，它可以解决问题。

exports.Init = Init;

Answer 2

导出不应是函数表达式。它应该是一个对象。

module.exports = {}

没有

module.exports = () => {}

我见过人们使用函数，但不使用函数表达式。

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

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

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

javascript

webpack

webpack-4