Grapesjs: Cannot init the editor

[psycura]

Hello, im trying to use your editor in my project, that builded on Vue.js. Ive done all requested first steps, i.e: cloned repo, installed all dependencies, build with grunt.
After all this steps i took the dist folder with all min. files and inserted into my project.

So now in my project i`m trying to import your scripts this way:

import * as grapesjs from '../grapesjs/grapes.min.js'
but when i trying to init the editor :

    var editor = grapesjs.init({
        container : '#gjs',
        components: '<div class="txt-red">Hello world!</div>',
        style: '.txt-red{color: red}',
    });

i receive error in tht console:

ReferenceError: key is not defined
    at N.d.initUndoManager (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:530600)
    at Object.onLoad (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:468308)
    at eval (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:528954)
    at Array.forEach (native)
    at N.d.initialize (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:528932)
    at N.d.b.Model (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:32431)
    at new N.d (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:51241)
    at new b (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:535973)
    at Object.init (eval at 222 (http://localhost:3000/1.542fee55cc3d6ba6a752.hot-update.js:6:1), <anonymous>:4:538917)
    at grapeEditor (eval at 531 (http://localhost:3000/1.f63b8aaa1f38625ec4d7.hot-update.js:7:1), <anonymous>:8:79)

What i do wrong?

Thanks for help

[artf]

Really strange. Seems like it's unable to load keymaster (which should be loaded globally), maybe there is some issue with the bundler.
Can you load grapes.min.js just via script tag?

[psycura]

I'll try,
Maybe I can import the keymaster to the component?

[artf]

Yeah maybe, let me know

[psycura]

Thank for you advice - inesring link to script into the index.html did the trick (maybe something in webpack broke the dependencies in your file)

Now everythin work fine.

And again, thanks for help, and for the development )

[kkinder]

So, to clarify, is there not an elegant way to import grapes.js using webpack and ECMAScript 6 import statements?

[artf]

@kkinder I think there is some problem with the keymaster binding.
Anyway, in these days I'm switching from requirejs to webpack2 and babel so hope to see some improvements here :)

[kkinder]

@artf Thanks! That's actually what I'm using too, but I'm running into Grapes.js apparently wanting to load CodeMirror directly. What are you doing to import Grapes?

[artf]

yeah, CodeMirror is a merged dependency for now.
At the moment I've always managed to import grapesjs directly via script tags

[kkinder]

Yeah, that makes sense.

It's just that bringing it in via script tags isn't very elegant if you're generally using a client build system like webpack.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.