expose-loader: Exposing jQuery not working

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?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 11
Comments: 20 (1 by maintainers)

Commits related to this issue

Fore ReactRouterDOM exposing. // https://github.com/webpack-contrib/expose-loader/issues/20. — committed to turris-cz/reforis by bogdanbodnar 4 years ago

Most upvoted comments

Experiencing the described problem with Webpack 4.

+15

uoziod on May 4, 2018

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 = $;
//...

Wapweb on Jul 8, 2017

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?

akaspick on Dec 13, 2019

@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 ?

gingray on Jul 14, 2017

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.

JohnnyFun on Jul 8, 2017

i have this problem toooooo

fox19920726 on Jun 15, 2017

this is also OK


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

xgqfrms on Sep 4, 2018

@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.

ErikSchierboom on Sep 21, 2017