{"action":"created","issue":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/416","labels_url":"https://api.github.com/repos/liferay/alloy-editor/issues/416/labels{/name}","comments_url":"https://api.github.com/repos/liferay/alloy-editor/issues/416/comments","events_url":"https://api.github.com/repos/liferay/alloy-editor/issues/416/events","html_url":"https://github.com/liferay/alloy-editor/issues/416","id":124354577,"number":416,"title":"Troubles using React and webpack","user":{"login":"cedricdelpoux","id":2683300,"avatar_url":"https://avatars.githubusercontent.com/u/2683300?v=3","gravatar_id":"","url":"https://api.github.com/users/cedricdelpoux","html_url":"https://github.com/cedricdelpoux","followers_url":"https://api.github.com/users/cedricdelpoux/followers","following_url":"https://api.github.com/users/cedricdelpoux/following{/other_user}","gists_url":"https://api.github.com/users/cedricdelpoux/gists{/gist_id}","starred_url":"https://api.github.com/users/cedricdelpoux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cedricdelpoux/subscriptions","organizations_url":"https://api.github.com/users/cedricdelpoux/orgs","repos_url":"https://api.github.com/users/cedricdelpoux/repos","events_url":"https://api.github.com/users/cedricdelpoux/events{/privacy}","received_events_url":"https://api.github.com/users/cedricdelpoux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-12-30T14:23:19Z","updated_at":"2015-12-30T17:35:29Z","closed_at":null,"body":"Hi I tried to use AllowEditor with React but I have errors in my browser console.\r\n\r\n`Cannot read property 'add' of undefined` in alloy-editor-no-react.js:12062 \r\n`Cannot set property 'dir' of undefined` in alloy-editor-no-react.js:237\r\n\r\nI read I maybe have to to redefine window.ALLOYEDITOR_BASEPATH and AlloyEditor.regexBasePath but I don't know exactly what to write. \r\nI tried this regex AlloyEditor.regexBasePath = /nodes_modules\\/alloyeditor\\/dist\\/alloy-editor\\/allow-editor-no-react-min.js/ but it does not work.\r\n\r\nMy javascript is compiled with webpack and this is the code I use to initialize it : \r\n\r\n```javascript\r\nimport \"!style!file!css!alloyeditor/dist/alloy-editor/assets/alloy-editor-moono-min.css\"\r\n\r\nimport React, { Component } from \"react\"\r\nimport AlloyEditor from \"alloyeditor\"\r\n\r\nexport default class Editor extends Component {\r\n  componentDidMount() {\r\n    this._editor = AlloyEditor.editable(this.refs.container\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    this._editor.destroy()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref=\"container\">\r\n        Test\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\nThe initialization seems work because my container is transformed to an content editable component. But I have only a textearea. "},"comment":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/comments/168041096","html_url":"https://github.com/liferay/alloy-editor/issues/416#issuecomment-168041096","issue_url":"https://api.github.com/repos/liferay/alloy-editor/issues/416","id":168041096,"user":{"login":"ipeychev","id":78014,"avatar_url":"https://avatars.githubusercontent.com/u/78014?v=3","gravatar_id":"","url":"https://api.github.com/users/ipeychev","html_url":"https://github.com/ipeychev","followers_url":"https://api.github.com/users/ipeychev/followers","following_url":"https://api.github.com/users/ipeychev/following{/other_user}","gists_url":"https://api.github.com/users/ipeychev/gists{/gist_id}","starred_url":"https://api.github.com/users/ipeychev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ipeychev/subscriptions","organizations_url":"https://api.github.com/users/ipeychev/orgs","repos_url":"https://api.github.com/users/ipeychev/repos","events_url":"https://api.github.com/users/ipeychev/events{/privacy}","received_events_url":"https://api.github.com/users/ipeychev/received_events","type":"User","site_admin":false},"created_at":"2015-12-30T17:35:29Z","updated_at":"2015-12-30T17:35:29Z","body":"Hello,\r\n\r\nIn short:\r\n1. Please check out [this](https://github.com/ipeychev/alloyeditor-react-component) repository, there is everything you need to make it working with on the server with Webpack.\r\n2. 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`.\r\nWhy 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.\r\nI'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 is much better to leave it to pull only what is needed.\r\n3. 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.\r\n\r\nHope that helps!\r\n\r\nThanks,"}}