Error: DiffMatchPatch is not a constructor

[ufoscout]

Hi all,

I am using angular-diff-match-patch 0.2.4 library with angular 1.5. My project configuration includes typescript and webpack.
When I use semantic diff directive, for example:

 <pre semantic-diff left-obj="..." right-obj="..."></pre>

I always receive this exception:

Error: DiffMatchPatch is not a constructor

How can I make it working with webpack?

[anotherchrisberry]

I was able to get around this by exposing the four global variables from diff-match-patch via:

require('expose?diff_match_patch!expose?DIFF_DELETE!expose?DIFF_EQUAL!expose?DIFF_INSERT!diff-match-patch/index');

There's probably a cleaner way to do this, but it seemed to get me through the same error.

[amweiss]

I don't use node myself, but if something needs to be added to https://github.com/amweiss/angular-diff-match-patch/blob/master/index.js feel free to let me know. Closing for now since there's a workaround and it's not coming from this library.

[anotherchrisberry]

Update for @ufoscout - this ended up being how I got around the error:

require('expose?diff_match_patch!diff-match-patch');
let DIFF_INSERT = require('exports?DIFF_INSERT!diff-match-patch/index');
let DIFF_DELETE = require('exports?DIFF_DELETE!diff-match-patch/index');
let DIFF_EQUAL = require('exports?DIFF_EQUAL!diff-match-patch/index');

then, in my service:

$window.DIFF_INSERT = DIFF_INSERT;
$window.DIFF_DELETE = DIFF_DELETE;
$window.DIFF_EQUAL = DIFF_EQUAL;

It's pretty ugly and I'm sure there's a better way to do this via Webpack.

[ufoscout]

@anotherchrisberry thanks for your suggestions. But it still does not work.
When I use :

require('expose?diff_match_patch!diff-match-patch');

webpack throws this error:
Module not found: Error: Can't resolve 'expose?diff_match_patch'

this is the dependencies section of my package.json:

{
  "dependencies": {
    "angular": "^1.5.7",
    "angular-animate": "~1.5.7",
    "angular-aria": "~1.5.7",
    "angular-cookies": "~1.5.7",
    "angular-diff-match-patch": "git@github.com:amweiss/angular-diff-match-patch.git#v0.2.4",
    "angular-messages": "~1.5.7",
    "angular-resource": "~1.5.7",
    "angular-sanitize": "~1.5.7",
    "angular-touch": "~1.5.7",
    "angular-ui-bootstrap": "^1.3.3",
    "angular-ui-router": "^0.3.1",
    "bootstrap": "^3.3.6",
    "diff-match-patch": "^1.0.0",
    "http-proxy-middleware": "^0.17.0",
    "url-loader": "^0.5.7"
  },
...
}

[ufoscout]

It works!!

The second solution of @anotherchrisberry works fine, but I was missing the required loaders.

So the the required steps are:

1. Install required webpack modules. Type in the terminal:
   npm install --save-dev exports-loader expose-loader

2. expose diff-match-patch library in the ts file:
   require('expose?diff_match_patch!diff-match-patch');

3. export required variables from diff-match-patch library:

(<any>window).DIFF_INSERT = require('exports?DIFF_INSERT!diff-match-patch/index');
(<any>window).DIFF_DELETE = require('exports?DIFF_DELETE!diff-match-patch/index');
(<any>window).DIFF_EQUAL = require('exports?DIFF_EQUAL!diff-match-patch/index');

and finally... enjoy it!

Thank you guys!

[yaacovCR]

See #46.

This would streamline above required steps:

1. Install single required webpack module. Type in the terminal:

   npm install --save-dev expose-loader
   

2. expose diff-match-patch library in js file:

   require('expose?diff_match_patch!diff-match-patch');
   

   OR via webpack config

       rules: [{
         test: require.resolve('diff-match-patch'),
         use: [{
           loader: 'expose-loader',
           options: 'diff_match_patch'
         }]
       }]
   

[feitzi]

With commit #4aa231a81f1cb6aebba3534dfe8571f217395910 this issue is reconvened. Webpack users have to switch back to version 0.6.11 to use the fix from @yaacovCR.
Very annoying :(.

[amweiss]

See 4aa231a#commitcomment-30265390

Please use the fix above (#27 (comment)) until someone can provide a better solution.

[yaacovCR]

See #62, supersedes #46, which caused regression #48 (apologies!)

What caused the regression? Well, the native Google diff-match-patch library available via Github/Bower actually differs from the npm package in that within the npm version, constants DIFF_INSERT and DIFF_DELETE are defined as static properties of the diff_match_patch class function, whereas in the original Github/Bower version, the constants are exported in parallel with diff_match_patch to the global scope.

npm start uses the bower version, but npm test loads the npm modules via karma. My patch naively tried to minimize the number of global variables and eventual expose-loader calls without realizing that the constants are only accessible via the global context from the Github/Bower version.

I could not find a straightforward way to test both the Bower and npm dependencies with the same testing framework. To verify the source of the error, I basically did a bower install and (temporarily) manually switched:

files: [
  ...
  'node_modules/diff-match-patch/index.js',
  ...
],			

to

files: [
  ...
  'bower_components/google-diff-match-patch/diff_match_patch_uncompressed.js',
  ...
],			

With #46, the new tests I have added fail, but only when using the bower version. With #62, the tests pass using both versions and the code coverage changes appropriately from version to version.

Usage with webpack is now even simpler than with expose-loader, and is now as follows (see https://webpack.js.org/guides/shimming/)

  config.plugins = [
  ...
    new webpack.ProvidePlugin({
      diff_match_patch: 'diff-match-patch'
    }),
  ...
  ];

Of note, diff_match_patch is no longer loaded from the window/$window object. This was originally introduced in commit 479314700bce7d95886ac77e7be280b538e9727c by @colin-higgins. I am not sure why; I think it was possibly just for linting reasons, which later may have been obviated by the addition of xo to the library. Anyone successfully using the library still must have had access to DIFF_INSERT and DIFF_DELETE directly from global scope, and presumably diff_match_patch was still accessible there as well. If there is something deeper there, then this change could potentially cause problems, and we could switch back to loading from window/$window and using expose-loader for webpack instead of the ProvidePlugin.