Issues on using Merge addon and diff_match_patch? (Solved)

Hello all.

My project is based on NodeJS and React, and I’m installed codemirror version 5.60.5.

I am trying to use codemirror with merge addon to my project.

As I searched in google, it seems like i have to import codemirror and import merge as well.
My import code is shown as below:

import * as CodeMirror from "codemirror";
import "codemirror/mode/meta";
import "codemirror/addon/merge/merge";

...

    const [itemRef, setItemRef] = useState<HTMLElement>(null);
    const [codeMirror, setCodeMirror] = useState<CodeMirror.MergeView>();

    useEffect(() => {
        if (!!itemRef) {
            const _code = CodeMirror(itemRef, {
                value: null,
                origLeft: null,
                orig: true,
                lineNumbers: true,
                mode: "application/ld+json",
                highlightDifferences: true,
                allowEditingOriginals: true,
                connect: "align",
                collapseIdentical: true
            })
        }
    }, [itemRef]);

%
const [codeMirror, setCodeMirror] = useState<CodeMirror.MergeView>();
%

Here, MergeView is not reachable from Codemirror by just putting import statement for merge addon.

Can anyone help me with using Codemirror Merge??

Thank you.

CodeMirror 5 doesn’t expose ES modules, so whatever is going wrong here likely has something to do with the magic your module loader or bundler uses to work around that.

I’ve solved this issue by working on the Webpack.

As per importing CodeMirror, I just needed to import the node package right away.
The issue was that CodeMirror.MergeView cannot be used as a type, but just call it right away.

import * as React from "react";
import {useEffect, useState} from "react";
import * as CodeMirror from "codemirror";
import "codemirror/addon/merge/merge.css";
import "codemirror/addon/merge/merge";

...
export const CodeMirrorEditor: React.FunctionComponent<Props> = () => {
...
    useEffect(() => {
        if (!!itemRef) {
            itemRef.innerHTML = "";
            const _code = CodeMirror.MergeView(itemRef, {
                value: "null",
                // origLeft: "null",
                orig: "true",
                lineNumbers: true,
                mode: "application/ld+json",
                showDifferences: true,
                allowEditingOriginals: true,
                connect: "align",
                collapseIdentical: true
            })
        }
    }, [itemRef]);

    return <div ref={setItemRef}/>;
}

After solving importing issue, there was an another issue with declaring “diff-match-patch” globally.

To solve this issue, first step is to install “diff_match_patch” and “@types/diff-match-patch” fron NPM.
Next, since my project is based on Typescript and uses Webpack as bundler, “diff-match-patch” must be bundled using webpack plugin.

plugins: [
        new webpack.ProvidePlugin({
            diff_match_patch: ["diff_match_patch/lib/diff_match_patch", "diff_match_patch"],
            DIFF_EQUAL: ["diff_match_patch/lib/diff_match_patch", "DIFF_EQUAL"],
            DIFF_INSERT: ["diff_match_patch/lib/diff_match_patch", "DIFF_INSERT"],
            DIFF_DELETE: ["diff_match_patch/lib/diff_match_patch", "DIFF_DELETE"],
        })
    ]

Finally, I can now use CodeMirror merge addon in my typescript project.

Hope this solution would help others going through this same issue~!