Need help on upgrade 0.17.0 that breaks the build when cloning LinkNode to my own nodes

[ebengtso]

Hi,

I have cloned the LinkNode and LinkPlugin to do my own stuff in previous 0.16.3 version. I have upgrade to 0.17.0 and now the build fails. I have no idea how to fix it, because I have already cloned these files again to match the exact content of 0.17.0 version.

Link to a working version based on 0.16.3

I would appreciate any pointer. Thank you.

I have the files:

AnnotationNode => copy of LinkNode
AnnotationPlugin => copy of LinkPlugin

It fails to build the AnnotationPlugin in the line of code "if (!editor.hasNodes([AnnotationNode])) {":

export function AnnotationPlugin({validateUrl}: Props): null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if (!editor.hasNodes([AnnotationNode])) {
      throw new Error('AnnotationPlugin: AnnotationNode not registered on editor');
    }

AnnotationNode is an exact copy/paste of LinkNode replaced the words LinkNode with AnnotationNode

  Types of construct signatures are incompatible.
    Type 'new (url: string, attributes?: AnnotationAttributes, key?: string | undefined) => AnnotationNode' is not assignable to type 'new (...args: any[]) => LexicalNode'.
      Construct signature return types 'AnnotationNode' and 'LexicalNode' are incompatible.
        The types of '['constructor']' are incompatible between these types.
          Type 'KlassConstructor<typeof ElementNode>' is not assignable to type 'KlassConstructor<typeof LexicalNode>'.
            Type 'KlassConstructor<typeof ElementNode>' is not assignable to type 'GenericConstructor<LexicalNode>'.
              Construct signature return types 'ElementNode' and 'LexicalNode' are incompatible.
                The types of 'isSelected' are incompatible between these types.
                  Type '(selection?: import("/Users/my/node_modules/lexical/LexicalSelection").BaseSelection | null | undefined) => boolean' is not assignable to type '(selection?: import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalSelection").BaseSelection | null | undefined) => boolean'.
                    Types of parameters 'selection' and 'selection' are incompatible.
                      Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalSelection").BaseSelection | null | undefined' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalSelection").BaseSelection | null | undefined'.
                        Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalSelection").BaseSelection' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalSelection").BaseSelection'.
                          Types of property '_cachedNodes' are incompatible.
                            Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").LexicalNode[] | null' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").LexicalNode[] | null'.
                              Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").LexicalNode[]' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").LexicalNode[]'.
                                Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").LexicalNode' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").LexicalNode'.
                                  Types of property '['constructor']' are incompatible.
                                    Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalEditor").KlassConstructor<typeof import("/Users/my/...' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalEditor").KlassConstructor<typeof import("/Users/my/node_modules/lexical/Lexical...'.
                                      Type 'KlassConstructor<typeof LexicalNode>' is not assignable to type '{ prototype: LexicalNode; getType: () => string; clone: (_data: unknown) => LexicalNode; importDOM?: (() => DOMConversionMap<any> | null) | undefined; importJSON: (_serializedNode: SerializedLexicalNode) => LexicalNode; transform: () => ((node: LexicalNode) => void) | null; }'.
                                        Types of property 'importDOM' are incompatible.
                                          Type '(() => import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null) | undefined' is not assignable to type '(() => import("/Users/my/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null) | undefined'.
                                            Type '() => import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null' is not assignable to type '() => import("/Users/my/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null'.
                                              Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").DOMConversionMap<any> | null'.
                                                Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversionMap<any>' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").DOMConversionMap<any>'.
                                                  'string' index signatures are incompatible.
                                                    Type '(node: any) => import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversion<any> | null' is not assignable to type '(node: any) => import("/Users/my/node_modules/lexical/LexicalNode").DOMConversion<any> | null'.
                                                      Type 'import("/Users/my/node_modules/@lexical/utils/node_modules/lexical/LexicalNode").DOMConversion<any> | null' is not assignable to type 'import("/Users/my/node_modules/lexical/LexicalNode").DOMConversion<any> | null'.
                                                        Type 'import("/Users/my```



Here is the AnnotationPlugin.ts:



```import {$toggleAnnotation, AnnotationNode, TOGGLE_ANNOTATION_COMMAND} from './Annotation';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {mergeRegister, objectKlassEquals} from '@lexical/utils';
import {
  $getSelection,
  $isElementNode,
  $isRangeSelection,
  COMMAND_PRIORITY_LOW,
  PASTE_COMMAND,
} from 'lexical';
import {useEffect} from 'react';

type Props = {
  validateUrl?: (url: string) => boolean;
};

export function AnnotationPlugin({validateUrl}: Props): null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if (!editor.hasNodes([AnnotationNode])) {
      throw new Error('AnnotationPlugin: AnnotationNode not registered on editor');
    }
    return mergeRegister(
      editor.registerCommand(
        TOGGLE_ANNOTATION_COMMAND,
        (payload) => {
          if (payload === null) {
            $toggleAnnotation(payload);
            return true;
          } else if (typeof payload === 'string') {
            if (validateUrl === undefined || validateUrl(payload)) {
              $toggleAnnotation(payload);
              return true;
            }
            return false;
          } else {
            const {url, target, rel, title} = payload;
            $toggleAnnotation(url, {rel, target, title});
            return true;
          }
        },
        COMMAND_PRIORITY_LOW,
      ),
      validateUrl !== undefined
        ? editor.registerCommand(
            PASTE_COMMAND,
            (event) => {
              const selection = $getSelection();
              if (
                !$isRangeSelection(selection) ||
                selection.isCollapsed() ||
                !objectKlassEquals(event, ClipboardEvent)
              ) {
                return false;
              }
              const clipboardEvent = event as ClipboardEvent;
              if (clipboardEvent.clipboardData === null) {
                return false;
              }
              const clipboardText =
                clipboardEvent.clipboardData.getData('text');
              if (!validateUrl(clipboardText)) {
                return false;
              }
              // If we select nodes that are elements then avoid applying the link.
              if (!selection.getNodes().some((node) => $isElementNode(node))) {
                editor.dispatchCommand(TOGGLE_ANNOTATION_COMMAND, clipboardText);
                event.preventDefault();
                return true;
              }
              return false;
            },
            COMMAND_PRIORITY_LOW,
          )
        : () => {
            // Don't paste arbritrary text as a link when there's no validate function
          },
    );
  }, [editor, validateUrl]);

  return null;
}```

[ebengtso]

Solved.

Very stupid error, I forgot to update in the package.json the dependency @lexical/react, I did only update the lexical.

Here is how to fix

"@lexical/react": "^0.17.0",
"lexical": "^0.17.0",

Shame on me