Getting 'diff_match_patch is not defined' error when use merge in react

1

Hi, i’m trying to use merge mode in react.
Here is the code:

import React, {Component} from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/merge/merge';
import 'codemirror/addon/merge/merge.css';
import 'diff_match_patch';

componentDidMount() {
    const {left, right} = this.state;
    CodeMirror.MergeView(document.getElementById(`fileDiff`), {
      value: left,
      orig: right,
      lineNumbers: true,
      mode: "text/html",
      highlightDifferences: true
    });
  }

and then getting this error:

Uncaught ReferenceError: diff_match_patch is not defined

I have tried various ways to fix it, but doesn’t work, what is the right way?

2

The diff_match_patch library is old and unmaintained (but unfortunately still the fastest JS diffing library that I’ve found), so it doesn’t really use a modern module system, and I guess that’s somehow confusing your bundler.

3

How to fix it ?

4

Hi @marijn is there any workaround for the import syntax? I am integrating this in an ember app.
Would be really helpful if we have a workaround for this. Thanks in advance