Webpack utilisant bootstrap - jquery n'est pas défini

Question

 import $ from 'jquery';
require("./node_modules/bootstrap/dist/css/bootstrap.min.css")
require("./node_modules/bootstrap/js/dropdown.js")
import React from 'react';
import ReactDOM from 'react-dom';
var _ = require('lodash');
 

S'il vous plaît se référer ci-dessus mon réglage. Une erreur de lecture me dit " Erreur de référence non capturée: jQuery n'est pas défini () à partir de dropdown.js

J'ai également inclus les lignes suivantes à webpack.config.js

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

Mais, pas de chance - ayant toujours une erreur indéfinie jQuery. Une idée ? Quelqu'un peut-il aider ce problème s'il vous plaît?

Merci beaucoup

Answer 1

s'il vous plaît utilisez webpack ProviderPlugin, utiliser global n'est pas une bonne idée.

 // webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};
 

Answer 2

Cela fonctionnera!

 global.jQuery = require('jquery');
 

au lieu de

 import $ from 'jquery';
 

Answer 3

mondiale.jQuery ne fonctionne pas pour moi. Mais j'ai trouvé intéressant de lire ici: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

L'idée de base est d'utiliser webpacks importations-loader'. Notez, cependant, qu'il n'est pas installé par défaut, donc la première chose à installer (npm install --enregistrer les importations-chargeur). Et dans webpack.config ajouter à votre chargeurs suivants:

{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }

Après cela il suffit d'importer jquery et bootstrap, ou certains autres plugins étendant sur 'jQuery', comme d'habitude.

ce qui concerne

Answer 4

Pour que ce code fonctionne, vous devez redémarrer le noeud après le changement:

 // webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};
 

Answer 5

Comme mentionné par @Ro, n'oubliez pas de redémarrer le serveur de nœud, sinon les modifications apportées au pack Web ne seront pas prises en compte.

Je confirme qu'une fois ces lignes ajoutées et le serveur redémarré, l'erreur disparaît.

Avec Bootstrap 4, une version mise à jour de webpack.config.js ressemblera à ceci à cause de sa dépendance avec Tether:

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