React-ace: Integration mit Reaktionskessel

Erstellt am 19. Jan. 2018 · 7Kommentare · Quelle: securingsincity/react-ace

Problem

Hallo Leute, ich bin neu bei React-Ass, sehr schönes Projekt übrigens, hat mir sehr gut gefallen.
Ich habe eine sehr Noob-Frage, ich habe gerade ein Projekt mit https://github.com/react-boilerplate/react-boilerplate gebootet , react-ace als Abhängigkeit hinzugefügt und alles scheint gut zu funktionieren.

Aber ich erhalte die obige Fehlermeldung auf der Konsole:

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

Es scheint, dass es etwas mit der Webpack-Konfiguration zwischen beiden Projekten zu tun hat? Könnt ihr etwas zu diesem Setup empfehlen?

So verwende ich 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

Quelle

henviso

Hilfreichster Kommentar

@henviso Sie müssen einen Modus festlegen und diese Themen und Modi separat importieren, wie in der grundlegenden Verwendung in der Readme-Datei https://github.com/securingsincity/react-ace#basic -usage gezeigt.

securingsincity am 19. Jan. 2018

👍2

Alle 7 Kommentare

securingsincity am 19. Jan. 2018

👍2

Bei mir passiert es auch, und ich habe diese Importe deklariert. Das ist mein 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"
/>

Es funktioniert auch, aber in der Konsole wirft es:
Uncaught SyntaxError: Unexpected token < python.js:1
Und wenn ich zu dieser Datei gehe, die auf /snippets/python.js gehostet wird, zeigt sie meine index.html

Ich vermute also, dass ich einige zusätzliche Konfigurationen zum Webpack hinzufügen muss, um das erforderliche JS ( /brace/snippets/python.js ) an einen öffentlichen Ort zu kopieren; mit copy-webpack-plugin .

Irgendwelche Gedanken?