Range is not a constructor

[Nik3181]

Range is not a constructor with version 3+ in react, works fine till 2.3.0
https://codesandbox.io/s/ace-diff-react-2z19y

[JackuB]

That's not the error I'm seeing on the link you've shared:

Don't see ace-builds being included there. If you include it (globally 2nd line or with options), it seems to be working

[Nik3181]

there is a dependency section on the bottom left corner, please try changing it to 3.0.3. including ace-builds didn't help either.

[Benjamin-Dobell]

I've ran into this also using brace and webpack. The underlying cause is as follows:

i.e. Brace's Range module exports an object with a Range value, rather than exporting a function. Brace always requires the Range module than grabs the exported Range property e.g

https://github.com/thlorenz/brace/blob/3a00c5d59777f9d826841178e1eb36694177f5e6/mode/tcl.js#L5

Where as ace-diff attempts to use the exported value directly as a function/constructor, hence the error.

EDIT: Ace Editor itself also requires, then grabs the underlying property:

https://github.com/ajaxorg/ace/blob/aaf90777d05980489c411dc16ba63476eed14e63/lib/ace/keyboard/vim_ace_test.js#L41

This is my first time using Ace so I can only speculate, but presumably the Range module was changed recently to export an object, not a function.

[Benjamin-Dobell]

Seems as ace-diff looks first for Range on ace (as provided to the AceDiff constructor), you can work around this issue with:

import ace from 'brace'
ace.Range = ace.acequire("ace/range").Range

[krmckone]

@Benjamin-Dobell This works for me using vuejs/webpack thanks for the workaround.