search

wickedest / Mergely

Merge and diff documents online
http://www.mergely.com
Other
1.18k stars 228 forks source link

Cannot read property 'defineExtension' of undefined TypeError #150

Closed liuweiming1997 closed 3 years ago

liuweiming1997 commented 3 years ago

HI all, as a newbie of FE, I can`t solve the problem I use most of the mergely code demo and doesn`t work. (it means I don`t integrate with mergely.js at all) the Error is

jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'defineExtension' of undefined TypeError: Cannot read property 'defineExtension' of undefined
    at new V.CodeMirrorDiffView (https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js:1:5760)
    at V.mergely.init (https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js:1:5637)
    at new V.mergely (https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js:1:5548)
    at HTMLDivElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js:1:43542)
    at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
    at r.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:1003)
    at r.fn.init.E.fn.<computed> [as mergely] (https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js:1:43388)
    at HTMLDocument.<anonymous> (http://localhost:8080/index/test:63:19)
    at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
    at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
S @ jquery.min.js:3
jquery.min.js:2 Uncaught TypeError: Cannot read property 'defineExtension' of undefined
    at new V.CodeMirrorDiffView (mergely.min.js:1)
    at V.mergely.init (mergely.min.js:1)
    at new V.mergely (mergely.min.js:1)
    at HTMLDivElement.<anonymous> (mergely.min.js:1)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.E.fn.<computed> [as mergely] (mergely.min.js:1)
    at HTMLDocument.<anonymous> (test:63)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

I guess is sth error with JQuery version and Mergely version? But I try to use the demo code version, but still doesn`t work. can anyone help me? Thanks. My Code is

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Bootstrap Table CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/styles/default.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css">
    <title>
       Vimi Test  | Vimi-Admin
    </title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="mergely-full-screen-8">
  <div class="mergely-resizer">
    <div id="mergely"></div>
  </div>
</div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/search/searchcursor.min.js"></script>

    <!-- thrid part lib JS goes HERE  -->

    <script>
      hljs.highlightAll();
      new ClipboardJS('.btn');
    </script>
    <!-- personal JS goes HERE  -->

<script>
$(document).ready(function () {
    // set editor content
    $('#mergely').mergely({
        lhs: function(setValue) {
            setValue('the quick red fox\njumped over the hairy dog');
        },
        rhs: function(setValue) {
            setValue('the quick brown fox\njumped over the lazy dog');
        }
    });
    $('#mergely').mergely('diff');
});
</script>

  </body>
</html>
wickedest commented 3 years ago

Nothing jumps out at me. The issue is CodeMirror is not defined for some reason, but I can see that it is being included. Check your HTTP network tab, make sure it's being loaded.

liuweiming1997 commented 3 years ago

Nothing jumps out at me. The issue is CodeMirror is not defined for some reason, but I can see that it is being included. Check your HTTP network tab, make sure it's being loaded.

Thanks your reply, my network is not blocked and I try to use CodeMirror directly, it`s works..

wickedest commented 3 years ago

The issue is that mergely is being required before CodeMirror. Change the order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/search/searchcursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mergely/4.3.1/mergely.min.js"></script>

The mergely plugin is being initialized even before you call $('#mergely').mergely and it has a dependency on CodeMirror.

liuweiming1997 commented 3 years ago

Thanks @wickedest answer, it`s helpful, it works for me. But your explain is a little confused to me, because I don`t use mergely(but I include it and the order is wrong), there is no error happened. confusing

wickedest commented 3 years ago

I was trying to explain that when the mergely script is imported, it has an immediate dependency on CodeMirror and jQuery, which must be included prior, or else you will get errors.