summernote: v0.8.20 Uncaught TypeError: Cannot read properties of undefined (reading 'lang')

Description of your Issue or Request:

Console Error in Chrome Uncaught TypeError: Cannot read properties of undefined (reading ‘lang’) and it doesn’t display the form and i changed the import location because the lang folder was changed in this version.

What is your Operating System, Browser and Version and Summernote Version you are using:

This can help find and resolve any issues, place an x inside the brackets or if relevant elaborate after each choice. 1. Operating System: [X ] Microsoft Windows 2. Browser and Version: [X] Chrome Lastest 3. Summernote Version, place an x inside the brackets: [X] BS4

import 'summernote/dist/summernote-bs4';
import 'summernote/dist/lang/summernote-es-ES';

$(function () {
    $('#form_contenido').summernote({
        lang: 'es-ES',
        minHeight: 540,
        fontName: 'Roboto',
        lineHeight: 0,
        dialogsFade: true,
        maximumImageFileSize: 6291456, // 500 KB      
    });
});

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 24 (11 by maintainers)

Most upvoted comments

I’m also having the same issue.

Here are some details that may help understanding :

In my case, I’m working on a PHP Laravel project and using Laravel Mix to bundle all my CSS and JS files. Mix uses Webpack to bundle files together. When I bundle all the Summernote JS files together with mix.js() then I get the same error.

But if I bundle all the JS files just with mix.combine(), which just concatenates all files together, then it works in the same way as loading each JS file with a <script> tag. This could be a quick solution, but then I lose all the power of Laravel Mix, which can also compress files to gzip and brotli, which reduces the minified Summernote bundle of 276Ko to a 68Ko Brotli file.

To resume, with Summernote, multiple plugins and translations files :

  • ✅ Works if all files are loaded in separate <script> tags.
  • ✅ Works if all files are concatenated in a single file, respecting the same order, then minified together and loaded via a single <script> tag.
  • ❌ Does not work if Webpack bundles all the files into a single file. I also gave them in the same order. But I don’t really know what Webpack does, as it may add some JS logic that isn’t compatible with Summernote.

As the Summernote project is also using Webpack, is there something to do in order to be able to bundle all these JS files into a single one without this error?
Should we set some specific options in Webpack?

As mentioned above, it’s not Summernote, but rather the plugin being used was designed to be used with an older version of Summernote. It’s not something I use myself, otherwise I would fork it, and update it to work the current version of Summernote. There’s no reason that anyone else can’t do the same.

The original poster, @glavrjk wasn’t posting about a plugin. I’m facing the same issue as he is, with a clone of the latest codebase and no code changes. Is the source code missing something? I think this should be reopened as the OP question wasn’t addressed and the issue is still happening.