CODEWITHSUNDEEP
javascriptreactjswebpack
amigo21
amigo21

Reputation: 391

importing 3rd party library with webpack that uses jQuery and Bootstrap

I'm trying to import a 3rd party theme/template into my ReactJS project which has some css and js code that I need. I was able to easily pull the styles but not the js.

Here's what my webpack plugin configuration looks like:

new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          jquery: 'jquery'
      })

and here's my index.js:

import 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.js'

import './vendor/js/custom.min.js'; << this is what doesn't work

As you can tell, the 3rd party resides in the vendor directory. When it tries to import custom.min.js, I get the following error:

Line 1:  '$' is not defined       no-undef
Line 1:  'jQuery' is not defined  no-undef

Please let me know if I should include any additional details.

Upvotes: 1

Views: 806

Answers (1)

Phillip Thomas
Phillip Thomas

Reputation: 1469

You'll need to include $ and jQuery as a references to jQuery by importing like this:

globals.js

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

app.js

import './globals.js';
import 'custom.min.js';

This should enforce the order of importing and allow the window to have attached jQuery.

Upvotes: 1

Related Questions