Use Summernote with Webpack

Question

I'm trying to get Summernote working with Webpack, but somehow it does not work.

I installed summernote with yarn yarn add summernote.

In my javascript file I'm importing webpack:

import $ from 'jquery';
import 'bootstrap';
import 'summernote/dist/summernote';

$('#summernote').summernote({});

But I'm getting the error:

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default()(...).summernote is not a function

If I use the summernote js from the dist folder, I also get this error on my webpack console (I don't have this error when importing summernote.js from the src directory (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), i. e.
    /path/to/node_modules/summernote/dist/summernote.js
* /path/to/node_modules/jquery/dist/jquery.js
    Used by 534 module(s), i. e.
    /path/to/node_modules/babel-loader/lib/index.js??ref--4-0!/path/to/assets/js/app.js

I tried this: enter link description here, but same result.

Answer 1

Problem

I think the issue here is to require the wrong jquery package name when the repo has been built with webpack. I did have a look at the built code and here is jquery required:

module.exports = factory(require("jQuery")); // this should be `jquery` instead

Also there's a ticket raised but it seems nothing got fixed.

Solution

Luckily webpack allows us to define how a module is resolved by listing the module in resolve.alias as following:

// webpack.config.js

const path from "path";

module.exports = {
  // ...
  resolve: {
    alias: {
      // resolve `jQuery` with actual `jquery` module
      jQuery: path.resolve(__dirname, "node_modules/jquery"),
    },
  },
  // ...
};

PS: Based on your comment which is using Symfony you can modify and add an alias to jQuery like this:

// 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;