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

Question

I have tried including two or three plugins with webpack and I keep getting this error:

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

*XYZ being the name of the function from that package.

Here is my webpack config:

 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; 

In this case, I get the error with filterizr plugin, (earlier i was trying to use Isotope), when I initialize the plugin in my app.js script (where I have initialized all the plugins I use)

I was also getting the same error with scrollOverflow and Iscroll but they are working fine now after adding them in ProvidePlugin

I have tried doing this with expose-loader to globally provide the module to all the scripts.

I am not explicitly including vendor scripts in my bundle anywhere since the vendor entry point in my webpack file automatically takes care of it. (If have checked they are all included in the vendor.js).

Any help is much appreciated. Let me know if you need any more code snippets.

PS: I am fairly new to webpack.

Answer 1

Just wanted to drop by, say 'hello' and give thumbs up - Have the same issue with vue-perfect-scrollbar . It uses a traditional perfect-scrollbar , and even though it imports PS as Perfect Scrollback correctly (I can console.log the PS from inside the method), I get in the console:

[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

Of course, the correctly console.log ged object has a PerfectScrollbar.prototype.update = function update () { , so I'm guessing it is a compilation error.