Estoy tratando de hacer que Summernote funcione con Webpack, pero de alguna manera no funciona.
Instalé summernote con yarn yarn add summernote .
En mi archivo javascript estoy importando webpack:
import $ from 'jquery'; import 'bootstrap'; import 'summernote/dist/summernote'; $('#summernote').summernote({});Pero estoy recibiendo el error:
Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default()(...).summernote is not a function Si uso summernote js de la carpeta dist, también recibo este error en la consola de mi paquete web (no tengo este error al importar summernote.js desde el directorio src ( import 'summernote/src/js/summernote.js' )):
warning in ./node_modules/jQuery/dist/jquery.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * /path/to/node_modules/jQuery/dist/jquery.js Used by 1 module(s), ie /path/to/node_modules/summernote/dist/summernote.js * /path/to/node_modules/jquery/dist/jquery.js Used by 534 module(s), ie /path/to/node_modules/babel-loader/lib/index.js??ref--4-0!/path/to/assets/js/app.jsIntenté esto: ingrese la descripción del enlace aquí , pero el mismo resultado.
Creo que el problema aquí es require el nombre del paquete jquery incorrecto cuando el repositorio se ha creado con webpack . Eché un vistazo al código construido y aquí se requiere jquery :
module.exports = factory(require("jQuery")); // this should be `jquery` insteadTambién hay un ticket levantado pero parece que nada se arregló.
Afortunadamente webpack nos permite definir cómo se resuelve un módulo enumerando el módulo en resolve.alias de la siguiente manera:
// webpack.config.js const path from "path"; module.exports = { // ... resolve: { alias: { // resolve `jQuery` with actual `jquery` module jQuery: path.resolve(__dirname, "node_modules/jquery"), }, }, // ... }; PD: según su comentario que usa Symfony, puede modificar y agregar un alias a jQuery como este:
// fetch the config, then modify it! const config = Encore.getWebpackConfig(); // Add another alias to jQuery config.resolve.alias.jQuery = path.resolve(__dirname, "node_modules/jquery") module.exports = config;