Utilisation de Jquery et Bootstrap avec Es6 Import pour React App

Bonjour, j’essaie d’inclure jquery et bootstrap dans un projet Reactjs, mais j’utilise des importations es6 pour le faire. J’ai inclus les importations comme indiqué ci-dessous dans mon fichier index.js. Mais lors du chargement de la page, une erreur est générée, indiquant que le code Javascript de Bootstrap nécessite jquery. J’ai déjà installé tous les paquets requirejs par npm. Comment puis-je insérer jQuery dans mon fichier de script final intégré et minifié?

import $ from 'jquery'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import '../node_modules/bootstrap/dist/js/bootstrap.min.js'; 

    Trouvez la réponse sur ce site ici

    Étape 1: Installez jquery et bootstrap

     npm install jquery bootstrap --save 

    Étape 2: Importez-les dans vendor.ts:

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

    Étape 3: Accédez à wepback.common.js dans le répertoire config et ajoutez cette section à l’intérieur du plugin:

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

    Cela permettra à bootstrap de trouver jquery

    Comme mentionné ici, vous ne pouvez pas compter sur ES6 pour respecter l’ordre de vos déclarations d’ import .

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

    Vous pouvez utiliser Gulp et Webpack pour réduire vos fichiers.

    Tester avec cette

     import jquery from 'jquery' window.jQuery = jquery require('bootstrap') 

    Après avoir importé tous les fichiers css de style, ajoutez le code ci-dessous dans votre fichier index.js

     window.jQuery = window.$ = require('jquery/dist/jquery.min.js'); require('bootstrap/dist/js/bootstrap.min.js'); 

    Pour une raison quelconque, jquery doit également être défini en minuscule

     import jQuery from 'jquery' global.jQuery = jQuery global.jquery = jQuery // jquery lowercase was the solution global.$ = jQuery let Bootstrap = require('bootstrap') import 'bootstrap/dist/css/bootstrap.css'