web-dev-qa-db-fra.com

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

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 " Uncaught ReferenceError: jQuery n'est pas défini () 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

jquerywebpack
42
Danny Kim

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"
       })
    ]
};
99
xushao

Cela fonctionnera!

global.jQuery = require('jquery');

au lieu de

import $ from 'jquery';
19
Bhargav Ponnapalli

global.jQuery n'a pas fonctionné pour moi. Mais j'ai trouvé une lecture intéressante ici: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

L'idée de base est d'utiliser les "paquets-chargeurs" de webpacks. Notez, cependant, que ce n’est pas installé par défaut, alors installez-vous en premier (install npm --save imports-loader). Et dans webpack.config, ajoutez à vos chargeurs les éléments suivants:

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

Après cela, importez simplement jquery et bootstrap, ou quelques autres plugins s'étendant sur 'jQuery', comme d'habitude.

cordialement

18
Sergiu Dogotaru

Pour que ce code fonctionne, vous devez RESTART Node après le changement: 

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

Comme mentionné par @Ro, n'oubliez pas de redémarrer le serveur de noeud, sinon les modifications apportées au Webpack 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',
}),
]
3
Stf_F

Installez et utilisez exports-loader pour des importations individuelles à partir de Dropdown avec Bootstrap 4.0 et Webpack 3.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
       })

Plugin ou importation individuelle: require("./node_modules/bootstrap/js/dist/dropdown")

versus

Importation de Bootstrap dans son intégralité: require("./node_modules/bootstrap")

Références

1
Salticus

ça va marcher 

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

Cela a fonctionné pour moi espérons que cela aide 

0
Jason Nelligan