React-ace: Integration with react-boilerplate

Created on 19 Jan 2018 · 7Comments · Source: securingsincity/react-ace

Problem

Hello guys, I'm new to react-ace, very nice project by the way, I liked a lot.
I have a very noob question, I just bootstraped a project with https://github.com/react-boilerplate/react-boilerplate, added react-ace as a dependency and everything seems to be working fine.

But I'm getting the error above on the console:

_mode-mode.js:1 Uncaught SyntaxError: Unexpected token <_

It seems that it is something about webpack configuration between both projects? Can you guys recommend anything about this setup?

This is the way I'm using react-ace:

import React, { Component } from 'react';
import AceEditor from 'react-ace';
import messages from './messages';

import 'brace/theme/github';

export default class HomePage extends Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <AceEditor
          mode=""
          theme="github"
          onChange={() => null}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

awaiting response

Source

henviso

Most helpful comment

@henviso you need to set a mode and import those themes and modes separately as shown in the basic usage in the readme https://github.com/securingsincity/react-ace#basic-usage .

securingsincity on 19 Jan 2018

👍2

All 7 comments

@henviso you need to set a mode and import those themes and modes separately as shown in the basic usage in the readme https://github.com/securingsincity/react-ace#basic-usage .

securingsincity on 19 Jan 2018

👍2

It's happening to me as well, and I have those imports declared. This is my code:

import AceEditor from 'react-ace'
import 'brace/mode/python'
import 'brace/theme/monokai'
// ...
<AceEditor
  name="ACE_EDITOR"
  value={this.props.value}
  mode="python"
  theme="monokai"
/>

It also works, but in the console it throws:
Uncaught SyntaxError: Unexpected token < python.js:1
And if I go to that file, hosted on /snippets/python.js, it shows my index.html

So my guess is that I'll need to add some extra config on webpack in order to copy that required JS (/brace/snippets/python.js) to a public location; using copy-webpack-plugin.

Any thoughts?