issue with language-data 6.5.0

v6
1

I’m seeing the following error when updating from language-data 6.4.1 to 6.5.0

✘ [ERROR] Could not resolve "@codemirror/legacy-modes/mode/pug"

    node_modules/@codemirror/language-data/dist/index.js:695:26:
      695 │             return import('@codemirror/legacy-modes/mode/pug').then(m => legacy(m.pug));
          ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./mode/pug.js" was not found on the file system:

    node_modules/@codemirror/legacy-modes/package.json:23:16:
      23 │       "import": "./mode/*.js",
         ╵                 ~~~~~~~~~~~~~

here is how I’m instantiating the editor:

import { useEffect, useRef } from "react";

import { closeBrackets } from "@codemirror/autocomplete";
import { history } from "@codemirror/commands";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { bracketMatching, indentOnInput } from "@codemirror/language";
import { languages } from "@codemirror/language-data";
import { EditorState } from "@codemirror/state";
import {
  crosshairCursor,
  drawSelection,
  dropCursor,
  highlightSpecialChars,
  rectangularSelection,
  // scrollPastEnd,
} from "@codemirror/view";

import { vim } from "@replit/codemirror-vim";
import useThemeChange from "~/hooks/useThemeChange";
import { useGlobalState } from "~/store";
import { EditorView } from "codemirror";

import { darkTheme, lightTheme } from "./editor-themes";
import TagInput from "./TagInput";

export const Editor = () => {
  const editor = useRef<HTMLDivElement>(null);

  const { setActiveNote, activeNote } = useGlobalState();

  const theme = useThemeChange();
  useEffect(() => {
    const startState = EditorState.create({
      doc: activeNote?.content,
      extensions: [
        theme === "dark" ? darkTheme : lightTheme,
        vim(),
        highlightSpecialChars(),
        history(),
        drawSelection(),
        dropCursor(),
        indentOnInput(),
        bracketMatching(),
        closeBrackets(),
        rectangularSelection(),
        crosshairCursor(),
        EditorView.lineWrapping,
        EditorView.updateListener.of((update) => {
          if (update.focusChanged) {
          }
          if (update.docChanged) {
            if (activeNote) {
              activeNote.content = update.state.doc.toString();
              setActiveNote(activeNote);
            }
          }
        }),
        // basicSetup,
        markdown({
          base: markdownLanguage,
          codeLanguages: languages,
        }),
      ],
    });

    const view = new EditorView({
      state: startState,
      parent: editor.current!,
    });

    return () => {
      view.destroy();
    };
  }, [theme, activeNote, setActiveNote]);

  return (
    <>
      {activeNote && (
        <div className="flex h-full flex-col">
          <div
            className="editor-container h-full w-full overflow-y-auto"
            ref={editor}
          />
          <div className="flex items-center">
            <TagInput />
          </div>
        </div>
      )}
    </>
  );
};

export default Editor;
2

This patch should help. Or just bump all your dependencies.

3

That worked, thanks!