Errors while upgrading to 0.20.0 packages

1

Going thought the stuff listed here

But I still have an error - my codemirror state is not being created. I am using a lot of extensions when defining state - so my guess is this is where the error is.

I am guessing it could be one of these

Plugin fields no longer exist, and providing decorations from a view plugin now happens by providing a function to the EditorView.decorations facet. Same for atomic ranges and scroll margins — you must use a facet for them now.

HighlightStyles objects no longer directly act as editor extensions, but have to be wrapped with the syntaxHighlighting function first.

Any tips on how I can upgrade cleanly? I am kind of lost on what is going wrong.

I am using these extensions.

import { highlightSpecialChars, drawSelection, keymap, EditorView, rectangularSelection } from '@codemirror/view';

import { EditorState } from '@codemirror/state';
import { indentOnInput, bracketMatching, defaultHighlightStyle } from '@codemirror/language';
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';

const customSetup = [
  /*@__PURE__*/highlightSpecialChars(),
  /*@__PURE__*/history(),
  /*@__PURE__*/drawSelection(),
  EditorView.lineWrapping,
  /*@__PURE__*/EditorState.allowMultipleSelections.of(true),
  /*@__PURE__*/indentOnInput(),
  defaultHighlightStyle.fallback,
  /*@__PURE__*/bracketMatching(),
  /*@__PURE__*/closeBrackets(),
  /*@__PURE__*/rectangularSelection(),
  /*@__PURE__*/keymap.of([
    ...closeBracketsKeymap,
    ...defaultKeymap,
    ...historyKeymap,
  ]),
];

export { customSetup };

I am also using the placeholder extension with some changes to its logic.

class Placeholder extends WidgetType {
  constructor(content) {
    super();
    this.content = content;
  }

  toDOM() {
    const wrap = document.createElement('span');
    wrap.className = 'cm-placeholder';
    wrap.style.pointerEvents = 'none';
    wrap.appendChild(typeof this.content === 'string' ? document.createTextNode(this.content) : this.content);
    if (typeof this.content === 'string') {
      wrap.setAttribute('aria-label', `placeholder ${this.content}`);
    } else {
      wrap.setAttribute('aria-hidden', 'true');
    }
    return wrap;
  }

  ignoreEvent() { return false; }
}

const customPlaceholder = (content) => {
  return ViewPlugin.fromClass(class {
    constructor(view) {
      this.view = view;
      this.placeholder = Decoration.set([Decoration.widget({ widget: new Placeholder(content), side: 1 }).range(0)]);
    }

    get decorations() {
      const startPosOfActiveLine = 1; // gets start position of active line - 
      this.placeholder = Decoration.set([Decoration.widget({ widget: new Placeholder(content), side: 1 }).range(startPosOfActiveLine)]);
      return true ? this.placeholder : Decoration.none;
    }
  }, { decorations: (v) => v.decorations });
};
2

Providing empty extensions array loads the editor without errors. So definitely messing something up in the extensions array.

Ultimately, this is the error I get

TypeError: Cannot read properties of undefined (reading 'extension')
    at inner (index.js?e1ea:1995:1)
    at inner (index.js?e1ea:1972:1)
    at inner (index.js?e1ea:1972:1)
    at flatten (index.js?e1ea:2001:1)
    at Function.resolve (index.js?e1ea:1909:1)
    at Function.create (index.js?e1ea:2734:1)
    at Proxy.buildEditor (CodeWithOutput.vue?9215:325:1)
    at Proxy.mounted (CodeWithOutput.vue?9215:507:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
3

Have you tried clearing your node_modules and package lock and reinstalling? Make sure you don’t have any 0.19 versions left (see npm ls --all) in your module tree.

4

I had that too
import syntaxHighlighting
import { indentOnInput, bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';

and replace
defaultHighlightStyle.fallback,
with
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),

5

Thank you @marijn and @liane

I followed both the suggestions.

I now have a new error

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Feels like an error I have seen before. I will keep digging but any pointers would be appreciated, thank you!

6

I saw this one too, but it was with the cssCompletion export that you don’t seem to use…
Since you have no error when all extensions are disabled, comment your extensions one at a time until you find the culprit

7

Thanks @liane I was able to solve it by wrapping my theme extensions in the syntaxHighlighting function as well.

For anyone that runs into a similar issue, this code worked

export const lightTheme = [lightColors, syntaxHighlighting(lightHightlightStyle)];
export const darkTheme = [darkColors, syntaxHighlighting(darkHightlightStyle)];