Exposing jQuery not working

[tysonnero]

In my webpack config I have the following line to expose jQuery on the global scope

{ test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },

I have a file that uses the $. For example:

.getScript(`${consumerWebUrl}/scripts/shared/trustlogo.js`)
        .done(() => {
          document.querySelector('#trustlogo_ph').innerHtml($.trustlogo(`${consumerWebUrl}/content/themes/images/trustlogo.png`, 'SC4', 'none'));
        });

However, during my webpack build, get the following error:

error  '$' is not defined  no-undef

Also, if I put the following directly in my file:

require('expose?$!expose?jQuery!jquery');

I get this error:

error  Unable to resolve path to module 'expose?$!expose?jQuery!jquery'  import/no-unresolved

According to this page, the above should all work: https://webpack.github.io/docs/shimming-modules.html. I must be missing something. Any advice?

[tysonnero]

For what I was trying to do, I abandoned the above approach and simply pulled out jQuery into its own bundle using CommonChunks:

plugins: [ new webpack.optimize.CommonsChunkPlugin('jquery', 'shared/jquery/jquery.min.js') ],

[JohnnyFun]

Be sure you have stable version of node installed. I had latest and it wasn't erroring or anything. Just wasn't working. Installed stable, good to go.

[montnyc]

@JohnnyFun are you running v4.5.0?

[JohnnyFun]

Yep:
node -v && npm -v
v4.5.0
3.7.5

[montnyc]

What is your version of jQuery? Still have the same error as @tysonnero.
node -v && npm -v
v4.5.0
3.7.5

[fox19920726]

i have this problem toooooo

[Wapweb]

Have the same issue
os: windows 10 64bit
node: v6.11.0
npm: v3.10.10
expose-loader: v0.7.3
webpack: v3.1.0
jquery: v3.2.1

webpack.config.txt

[JohnnyFun]

fwiw, a kind of hacky way I've worked around it in the past was to make a module that explicitly sets jquery on the window:

import Jquery from 'jquery';
window.$ = Jquery;
window.jQuery = Jquery;
export default Jquery;

Then just import/require that in your entry file and should be good.

But of course favor the way webpack says to do it. This should only be used if you just want to move on with your life and get jquery plugins to shut up and work.

[Wapweb]

I finally got 2 solutions that resolved my issue:
first:

//entry js file
import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';
//...

second (as @JohnnyFun mentioned ):

//entry js file
import $ from 'jquery';
global.$ = global.jQuery = $;
//...

[gingray]

@Wapweb this approach is also working for me but I've faced with that standard way is not working (or maybe I do something wrong)

module.exports = {
  test: require.resolve('jquery'),
  use: [
    {
      loader: 'expose-loader',
      query: 'jQuery',
    },
    {
      loader: 'expose-loader',
      query: '$',
    },
  ]
}

but this one is working fine

import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';

anyway standard is looking much better from my side, any suggestions how to make standard work ?

[ErikSchierboom]

@gingray Did you manage to find a solution to your problem, as I have the exact same issue where the import syntax works but the loader syntax doesn't.

[gingray]

@ErikSchierboom yes sorry for late response but hope it will be still helpful. Webpack is pretty tricky tool (I think for most of backend developers).
expose-loader is working for me it seems I configure it wrong somehow but add few remarks. If you have coffescript and create classes which expose to global context like

class @Spinner
...

to use expose-loader it will be this way

import 'expose-loader?Spinner!../clasess/spinner.coffee';

but need to do changes in coffee class itself

class Spinner
...
module.exports = Spinner

as you can see you haven't @ near the class name and when you export class you do it this way. If you will export other way it will be an es6 module instead of your coffee class which you can't use in global context.

And one more thing sometimes you need just load current js it might be a plugin or pure js code which not support modules and all the ideas behind new js wave. For this purposes use plugin script-loader it just execute js code. Hope it helps to you or maybe to someone.

[uoziod]

Experiencing the described problem with Webpack 4.

[rafakwolf]

same here :\

[xgqfrms]

this is also OK

require("expose-loader?$!jquery");
require("expose-loader?jQuery!jquery");

[elsheepo]

None of these solutions are working for me. I have created a project with create-react-app, installed expose-loader via npm, and all of these
require("expose-loader?$!jquery");
require("expose-loader?jQuery!jquery");
import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';
end with the same result, compilation fails, due to this error
Unexpected '!' in 'expose-loader?$!jquery'. Do not use import syntax to configure webpack loaders

[JohnnyFun]

@elsheepo you might consider using webpack's provide plugin like:

new webpack.ProvidePlugin({
	//provide jquery in all the ways 3rd party plugins might look for it (note that window.$/window.jQuery will not actually set it on the window, which is cool)
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'window.$': 'jquery'
})

Many npm packages are smart enough to try to import/require in their dependencies and thus won't actually need them set on the window.

But if you do indeed need it set on the window, did you try my hack above, where you make a module that imports jquery and sets it on the window?

[elsheepo]

@JohnnyFun indeed, provide plugin worked like a charm 👍 thanks!

[akaspick]

Just spent way too much time figuring this one out, but I finally was able to get jquery exposed properly.

This was always working for me:

import 'expose-loader?jQuery!expose-loader?$!jquery'

But I wanted to move that into my config like so:

{
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: 'jQuery'
  }, {
    loader: 'expose-loader',
    options: '$'
  }]
}

This didn't work though because I was also creating an alias to jquery to point to a minified version:

resolve: {
  alias: {jquery: 'jquery/dist/jquery.min.js'}
}

The alias wasn't allowing expose-loader to find 'jquery', so I removed the alias and now import 'jquery' works fine.

Although this leads me to a new issue (which I can live without for now)... anybody know how to get an alias working with expose-loader?

[alexander-akait]

Fixed, now you can use expose-loader?expose=jQuery,$!jquery, we move all exposes names to the expose option to avoid this problem