Troubles using React and webpack

[cedricdelpoux]

Hi I tried to use AllowEditor with React but I have errors in my browser console.

Cannot read property 'add' of undefined in alloy-editor-no-react.js:12062
Cannot set property 'dir' of undefined in alloy-editor-no-react.js:237

I read I maybe have to to redefine window.ALLOYEDITOR_BASEPATH and AlloyEditor.regexBasePath but I don't know exactly what to write.
I tried this regex AlloyEditor.regexBasePath = /nodes_modules/alloyeditor/dist/alloy-editor/allow-editor-no-react-min.js/ but it does not work.

My javascript is compiled with webpack and this is the code I use to initialize it :

import "!style!file!css!alloyeditor/dist/alloy-editor/assets/alloy-editor-moono-min.css"

import React, { Component } from "react"
import AlloyEditor from "alloyeditor"

export default class Editor extends Component {
  componentDidMount() {
    this._editor = AlloyEditor.editable(this.refs.container
  }

  componentWillUnmount() {
    this._editor.destroy()
  }

  render() {
    return (
      <div ref="container">
        Test
      </div>
    )
  }
}

The initialization seems work because my container is transformed to an content editable component. But I have only a textearea.

[sergiychernov]

i had the same problem, after specifying window.ALLOYEDITOR_BASEPATH and window.CKEDITOR_BASEPATH only one error left - Cannot read property 'add' of undefined and i have no idea how to fix it. Any help is appreciated.

[cedricdelpoux]

@sergiy-evision do you have an exemple of what you defined for these variables ?

[sergiychernov]

@cedricdelpoux, yeah. idea is you need to copy ./node_modules/alloyeditor/dist/alloy-editor/**/* to your dist folder and point those two variables to that folder. in my case

window.ALLOYEDITOR_BASEPATH = 'dist/alloyeditor/';
window.CKEDITOR_BASEPATH = 'dist/alloyeditor/';

here is example for react with gulp task and stuff
https://github.com/ipeychev/alloyeditor-react-component

[cedricdelpoux]

Ok thank you. If you succeed with your last error, please tell me :)

[sergiychernov]

sure will! But i hope someone already solved this and could help us here..

[cedricdelpoux]

I hope someone will tell us a solution without copying alloyEditor files to dist separatly

[ipeychev]

Hello,

In short:

1. Please check out this repository, there is everything you need to make it working with on the server with Webpack.
2. Copying AlloyEditor to dist folder might be not needed - in my example I'm copying it there just to serve everything from one directory only, I think it is a good approach. With the same success, you may point window.ALLOYEDITOR_BASEPATH and window.CKEDITOR_BASEPATH to where AlloyEditor is installed - probably somewhere in node_modules.
   Why AlloyEditor needs to know where it has been installed? It is needed, because it dynamically resolves the most suitable for your users language file (it is translated to 60+ languages) and loads it. CKEditor's engine will also pull two files.
   I'm not aware how to prevent the copying except to bundle all the 60+ language files and those of CKEditor, but this will cause sending garbage via the network. From performance point of view it is much better to leave it to pull only what is needed.
3. I don't know what is this error Cannot read property 'add' of undefined. Probably you have some custom configuration or widgets? If you don't, please try to create a simple page on which the error can be reproduced.

Hope that helps!

Thanks,

[cedricdelpoux]

I tried to specify these path with node_modules absolute path but I still get the same errors.

window.ALLOYEDITOR_BASEPATH = "nodes_modules/alloyeditor/dist/alloy-editor/"
window.CKEDITOR_BASEPATH = "nodes_modules/alloyeditor/lib/ckeditor/"

I will try to copy files to my dist folder

[ipeychev]

Hey @cedricdelpoux,

1. As written here, these variables should point to same path - where AlloyEditor is installed, not where CKEditor is.
2. Once you make them equal, if it still doesn't work, check what is the error - probably the browser doesn't have access to this path, or it is just wrong.
3. When reporting errors, please be more specific. I haven't graduated Hogwarts and reports like "do not work" are not enough for me to guess why.

Thanks,

[sergiychernov]

@ipeychev, thanks for reply. thing is we never ever ship node_modules to production env. so we have to copy entire folder to dist (via gulp or grunt) and set path to it.
good news are for @cedricdelpoux that i managed to fix this by specifying absolute path (not relative) in those two variables.

[ipeychev]

Yeah, I wouldn't point to node_modules directly neither.
Glad it worked for you!

All the best from me,
Iliyan