Integration with react-boilerplate

[henviso]

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>
    );
  }
}

[securingsincity]

@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 .

[fbove]

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?

[IshaTr]

@fbove Try importing import brace from 'brace'; on the top of both the mode and theme imports.
worked for me.

[mwb-27]

@fbove i have the same question, and i don't want to validate text in any programming language，how can i set mode

[hpsaah]

I'm importing import brace from 'brace'; but still showing the same error

[ningcui-compass]

I have the same issue and import 'brace' doesn't work for me.

[ningcui-compass]

Found the solution: you must specify a mode when using AceEditor

[MalekBouba]

Still have the same issue.

"react": "^17.0.2",
"react-ace": "^9.5.0",

and

<AceEditor
    mode="json"
    theme="solarized_dark"
    // ...
/>