Highlight.js "Could not find the language 'undefined', did you forget to load/include a language module?"

Question

I am using highlight.js for Froala editor code blocks at React. But I'm getting en error. I used registerLanguage function but it didn't work.

Error in browser:

Here is my code :

import FroalaEditor from 'react-froala-wysiwyg';
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/androidstudio.css';

hljs.registerLanguage('javascript', javascript)


export default function Editor({ handleEditor, data }: EditorType) {
  return (
    <div className="unreset">
      <FroalaEditor
        tag="textarea"
        onModelChange={handleEditor}
        model={data}
        config={{
          placeholderText: '',
          events: {
            //editor event
            contentChanged: function () {
              //.fr-element is editor wrapper tag
              document
                .querySelectorAll('.fr-element pre')
                .forEach((el: any) => {
                  // WARN: Falling back to no-highlight mode for this block. 
                  hljs.highlightElement(el);
                });
            },
          },
        
        }}
      />
    </div>
  );
}

Why does not work? Thanks.

Hilleary

Did you ever solve this? – Prayer