Webpack import $.my() is not a function.

[SijanC147]

Still grasping some fundamentels about webpack, but from what I gather plugin is not being applied on the global jquery? I've tried expose-loader and imports-loader approaches, and also have jquery on my ProvidePlugin object,

plugins: [
        new webpack.ProvidePlugin({
            jquery: 'jquery',
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery',
            "Tether": 'tether',
            "window.Tether": 'tether'
        })
    ],

to no avail.

Can there be some instructions or suggested method of using this plugin with webpack in the docs?

[SijanC147]

I was actually misusing the expose-loader, removing the plugins block from my webpack config and appending,

            {
                test: require.resolve('jquery'),
                loaders: ['expose?$', 'expose?jQuery']
            },

solved this issue.

[ermouth]

Nice!

Can you please provide entire resulting config or whatever to help respond future questions of this kind? I have nearly zero experience with webpack, any information is valuable.

Thanks )

[SijanC147]

yeah for sure man, in full disclosure i'm also just starting out with webpack so while this setup does work, I can't guarantee that it is the best, or recommended, approach.

The following is using

• webpack 2.1.0-beta.21
• jquery 3.1.0
• jquerymy 1.2.7

as far as the config goes, (and from what I gather this applies to a large portion of jQuery plugins), assuming you have webpack setup in your project directory, you'll need the expose-loader,

npm i expose-loader -D

the rest of the configuration is unimportant, save for the part I mentioned before, as described on the expose-loader github page, you'll need to add the specific loader test (tells webpack when to use the loader)

//webpack.config.js
module.exports = { 
    ....
    module: {
        loaders: [ 
            ....
            {
                test: require.resolve('jquery'), //use this loader for jquery plugin
                loaders: ['expose?$', 'expose?jQuery'] //expose this jquery to the global '$' and 'jQuery' vars.
            },
            ....
        ]
    }
    ....
};

That took care of all jqeury issues in my case.
However, I will also mention that even though node installed the recommended version of sugar (1.4.1) I still encountered #13 . The only way I found around this was to

import 'sugar';  // require('sugar'); if not using ES6

In my main entry point, before any of my other imports/requires, this will resolve to the version of sugar installed automatically by npm when installing jquerymy. Webpack usually takes care of this stuff, I might have missed something, but anyways, this worked.

If anyone with further insight into webpack has anything to share, please do, and I hope this helps someone in the future.

[ermouth]

You made perfect work, thanks!

I still encountered #13 . The only way I found around this was to

I will look into it more deeply.