Controlling dependencies in Webpack

Question

I'm using Laravel-mix and Webpack to combine and control scripts for a site.

I'm my main app.js I have these lines:

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

In polyfill-init.js I'm doing this: jQuery( document ).ready( .... That results in this error:

Uncaught ReferenceError: jQuery is not defined

I also get this error if I try and mix it together using Laravel-mix, by adding this to my webpack.mix.js:

mix.js( [
    'resources/js/app.js',
    'resources/js/vendor/polyfill-library.min.js',
    'resources/js/vendor/polyfill-init.js',
  ], 'assets/js/app.js')

I assume the error is because Webpack keeps the required/imported scripts in seperate namespaces/environments, so no conflicts occur. And that's all fine and dandy, - but I don't know how to combine two required/imported scripts, so they're using the same namespace/environment.

... If I copy all the code into app.js (instead of requiring it), then it works, but it's not pretty. Not pretty at all.

I looked at Webpack's documentation to see if there's a way to define a dependency for an imported/a required script, but either it's not there; or I'm not getting it.

I also looked at the 7 billion ways that this post suggest that I'd do it, - but I'm trying to figure out how Webpack/Laravel-mix want me to do it.

So my question is... Are there a way that I can do something like this:

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

... and let Webpack know, that polyfill-init can use jQuery?

AndrewShmig · Accepted Answer · 2019-01-28 07:16:21Z

4

You can use provideplugin:

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

edited Jan 28, 2019 at 7:16

AndrewShmig

4,9198 gold badges41 silver badges68 bronze badges

answered Jan 21, 2019 at 14:45

somsgod

3572 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zeth Over a year ago

That is in the webpack-config-file, - where I would like to control it all in the webpack.mix.js-file, so I can have the default settings, as far as possible.

Zawiszor · Accepted Answer · 2019-01-21 14:05:05Z

2

+50

Try window.jQuery = require( 'jquery' );

polyfill-init.js probably looks for jQuery in global scope while the var jQuery is only available in the local scope of this module.

answered Jan 21, 2019 at 14:05

Zawiszor

5485 silver badges11 bronze badges

Comments

Dinuka De Silva · Accepted Answer · 2019-01-28 07:11:07Z

0

U should externalize JQuery from the webpack.

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

polyfill-init.js

import $ from 'jquery';

Refer more details here https://webpack.js.org/configuration/externals/

answered Jan 28, 2019 at 7:11

Dinuka De Silva

2,9012 gold badges17 silver badges13 bronze badges

Collectives™ on Stack Overflow

Controlling dependencies in Webpack

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related