property - Webpack usando bootstrap-jquery no está definido

title attribute in html

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'');

Consulte arriba mi configuración. Por alguna razón, recibí un error que decía "Error de referencia no capturado: jQuery no está definido () en dropdown.js

También incluí las siguientes líneas en webpack.config.js

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

Pero, no hubo suerte: todavía tengo un error indefinido de jQuery. Alguna idea ? ¿Alguien puede ayudarme con este problema?

Muchas gracias

Answer 1

¡Esto funcionará!

global.jQuery = require(''jquery'');

en lugar de

import $ from ''jquery'';

Answer 2

Como mencionó @Ro, no olvide reiniciar el servidor de nodos, de lo contrario, los cambios en el paquete web no se tendrán en cuenta.

Confirmo que una vez que se agregaron estas líneas y se reinició el servidor, el error desaparece.

Con Bootstrap 4, una versión actualizada de webpack.config.js se verá realmente así debido a su dependencia con Tether:

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

Answer 3

Instale y use exports-loader de exports-loader para las importaciones desplegables individuales con Bootstrap 4.0 y Webpack 3 .

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

Complemento o importación individual: require("./node_modules/bootstrap/js/dist/dropdown")

versus

Importar Bootstrap en su totalidad: require("./node_modules/bootstrap")

Referencias

• la nota de Bootstrap 4.0 sobre la importación de complementos de Bootstrap individuales con webpack
• La respuesta de xushao
• Blog de Bhavyanshu Parasher

Answer 4

Para que este código funcione, debe reiniciar el nodo después del cambio:

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

Answer 5

esto funcionará

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

Funcionó para mí, espero que ayude

Answer 6

global.jQuery no funcionó para mí. Pero encontré una lectura interesante aquí: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

La idea básica es usar paquetes de web ''Import-Loader''. Sin embargo, tenga en cuenta que no está instalado de manera predeterminada, así que primero instale (npm install --save imports-loader). Y en webpack.config agregue a sus cargadores lo siguiente:

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

Después de eso, solo importe jquery y bootstrap, o algunos otros complementos que se extiendan en ''jQuery'', como de costumbre.

Saludos

Answer 7

utilice Webpack ProviderPlugin, usar global no es una buena idea.

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