jodit breaks when using requirejs

inspiraller commented 2 years ago

Jodit Version: 3.4.xxxxx

Browser: Chrome OS: Windows Is React App: False

dependencies

jodit - //cdnjs.cloudflare.com/ajax/libs/jodit/3.19.3/jodit.min.js
require - //requirejs.org/docs/release/2.3.6/minified/require.js

example file directory

js/
  lib/
    require.min.js
    someotherlibrary.min
    jodit/
      jodit.min.js
      jodit.min.css
index.html

error when loading jodit inside requirejs

Code 1

index.html

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/js/lib/jodit/jodit.min.css"/>
  </head>
  <body>
    <textarea class="editor"></textarea>

<!-- include scripts -->
<script src="/js/lib/require.min.js"></script>
<script>
  require.config({
    baseUrl: 'js',
    paths: {
      jodit: "/lib/jodit/jodit.min",
    }
  });
})
</script>
<script>
require(["jodit"], ({Jodit}) => {
  const renderRichhtml = (selector) => {
    console.log('Jodit', Jodit)
    Jodit.make(selector);
  }
  renderRichhtml('.editor');
});
</script>
<!-- end include scripts -->

  </body>
</html>

Error when loading jodit outside of requirejs (but using requirejs for other things)

index.html

Code 2

index.html

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/js/lib/jodit/jodit.min.css"/>
    <script src="/js/lib/jodit/jodit.min.js"></script>
  </head>
  <body>
    <textarea class="editor"></textarea>

<!-- include scripts -->

<script src="/js/lib/require.min.js"></script>
<script>
  require.config({
    baseUrl: 'js',
    paths: {
      otherlibrary: "/lib/someotherlibrary.min",
    }
  });
})
</script>
<script>
require(["someotherlibrary"], (someotherlibrary) => {
  const renderRichhtml = (selector) => {
    console.log('Jodit', Jodit)
    Jodit.make(selector); // exists on the window object.
  }
  renderRichhtml('.editor');
});
</script>
<!-- end include scripts -->

  </body>
</html>

Expected behavior:

to not cause javascript error when using both requirejs and jodit
to work

Actual behavior:

error: require.min.js:1 Uncaught Error: Mismatched anonymous define() module: function(){return{js_beautify:t}}

inspiraller commented 2 years ago

I've found a temporary workaround though not ideal. It is ace.js that breaks require.js load.

I've forked the original project

fork - jodit

git clone jodit
cd jodit
npm i
npm start

edit - src/plugins/source/config.ts

remove the references to load the source cdns: beautify, beautify-html, ace etc...

Config.prototype.sourceEditorCDNUrlsJS = [];
Config.prototype.beautifyHTMLCDNUrlsJS = [];

rebuild the project

npm build-no-uglify-es5

creates build/jodit.js

Download the original cdns and put into this directory

js/
  lib/
    beautify.min.js
    beautify-html.min.js

Update the index page - jodit/index.html


<script src="/js/lib/beautify.min.js"></script>
<script src="/js/lib/beautify-html.min.js"></script>
<script src="/build/jodit.js"></script>

<!-- NOTE: including ace breaks the require.config so excluding it completely -->
<script src="/js/lib/require.min.js"></script>
<script>
    require.config({
        baseUrl: 'build'
    });
</script>

<script>
    require([], () => { // don't include it as a dependency.
        console.log('loaded jodit', Jodit)
        const editor = Jodit.make('#editor');
    })
</script>

retest npm start localhost:2000

works

inspiraller commented 2 years ago

solution including jodit as a dependency via requirejs - shimming the other dependencies

<script>
  require.config({
    baseUrl,
    paths: {
      'beautify-html': "/js/lib/beautify-html.min",
      'beautify-css': "/js/lib/beautify-css",             // dynamic load from beautify-html
      beautify: "/js/lib/beautify.min",
      jodit: "/js/lib/jodit"
    },
    shim : {
      'jodit': ['beautify', 'beautify-html', 'beautify-css']
    },
</script>

<script>
    require(['jodit'], ({Jodit}) => { 
        console.log('loaded jodit', Jodit)
        const editor = Jodit.make('#editor');
    })
</script>

xdan / jodit