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
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"
})
]
};
Cela fonctionnera!
global.jQuery = require('jquery');
au lieu de
import $ from 'jquery';
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
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"
})
]
};
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', }), ]
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
ça va marcher
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
Cela a fonctionné pour moi espérons que cela aide