javascript - TypeError : __WEBPACK_IMPORTED_MODULE_0_jquery___default(. ..)(...).XYZ 不是函数

Question

我尝试在 webpack 中包含两个或三个插件，但我不断收到此错误:

TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).XYZ is not a function

*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 插件的错误(之前我尝试使用同位素)

我在使用scrollOverflow和Iscroll时也遇到了同样的错误，但在将它们添加到ProvidePlugin中后，它们现在工作正常

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

我没有在我的包中的任何地方明确包含 vendor 脚本，因为我的 webpack 文件中的 vendor 入口点会自动处理它。 (如果已检查，它们都包含在 vendor .js 中)。

非常感谢任何帮助。如果您需要更多代码片段，请告诉我。

PS:我对 webpack 还很陌生。

Answer 1

只是想过来打个招呼，然后竖起大拇指 - 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.logged 对象有一个 PerfectScrollbar.prototype.update = function update () {，所以我猜测它是一个编译错误。