javascript - TypeError:__WEBPACK_IMPORTED_MODULE_0_jquery ___ default(…)(…)。XYZ不是函数

我尝试在webpack中包含两个或三个插件，但不断出现此错误：


  TypeError：__WEBPACK_IMPORTED_MODULE_0_jquery ___ default（...）（...）。XYZ不是函数


* XYZ是该包中函数的名称。

这是我的webpack配置：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('assets/css/[name].css');
const postCSSOptions = require('./postcss.config.js');
const packages = require('./package.json');
const MODULES_DIR = path.resolve(__dirname, './node_modules');
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: 'assets/js/commons.js'
});

const config = {
    context: path.resolve(__dirname, 'src'),
    entry: {
        app: './app.js',
        vendor: Object.keys(packages.dependencies)
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/[name].js'
    },
    resolve: {
        extensions: ['.css', '.js', '.json'],
        modules: [MODULES_DIR]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['es2015', {modules: false}]
                        ]
                    }
                }]
            },
            {
                test: /\.scss$/,
                loader: extractCSS.extract([
                    {
                        loader: 'css-loader' // translates CSS into CommonJS modules
                    },
                    {
                        loader: 'postcss-loader', // Run post css actions
                        options: postCSSOptions
                    },
                    {
                        loader: 'sass-loader'
                    }
                ])
            },
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {
                test: /\.css$/,
                loader: extractCSS.extract([
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: postCSSOptions
                    }
                ])
            },
            {
                test: /\.(woff|woff(2)|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, MODULES_DIR)
                ],
                loader: 'url-loader'
            },
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: 'file-loader?name=assets/images/[name].[ext]'
                    }
                ]
            },
            {
                test: /(^-partial)?\.html$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            interpolate: true,
                            attrs: ['img:src']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        extractCSS,
        extractCommons,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            scrollOverflow: 'scrollOverflow',
            IScroll: 'iscroll',
            filterizr : 'filterizr'
        })
    ]
};

module.exports = config;

在这种情况下，当我在app.js脚本中初始化插件时（我已经初始化了我使用的所有插件）时，filterizr插件出现了错误（之前我尝试使用Isotope）。

当我在ProvidePlugin中添加它们后，scrollOverflow和Iscroll也出现了相同的错误，但它们现在工作正常

我尝试使用expose-loader来为所有脚本全局提供模块。

我没有在捆绑包中的任何地方明确包含供应商脚本，因为Webpack文件中的vendor入口点会自动处理它。 （如果已检查，它们都包含在vendor.js中）。

任何帮助深表感谢。让我知道是否需要更多代码片段。

PS：我对webpack还是很陌生。

最佳答案

只是想顺便说一句，打个招呼，问好-与vue-perfect-scrollbar相同。它使用传统的perfect-scrollbar，即使它正确地将PS作为Perfect Scrollback导入（我可以从方法内部console.log PS），也可以进入控制台：

[Vue warn]: Error in mounted hook: "TypeError:
__WEBPACK_IMPORTED_MODULE_0_perfect_scrollbar__.a.update is not a
function"

found in

---> <VuePerfectScrollbar> at src/components/PerfectScrollbar.vue

当然，正确的console.log ged对象有一个PerfectScrollbar.prototype.update = function update () {，所以我猜它是编译错误。

关于javascript - TypeError:__WEBPACK_IMPORTED_MODULE_0_jquery ___ default(…)(…)。XYZ不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49775369/