ReactJS: "Nicht erfasster Syntaxfehler: Unerwartetes Token <"

110

Ich versuche, eine Site in ReactJS zu erstellen. Als ich jedoch versuchte, mein JS in eine separate Datei zu stellen, wurde der folgende Fehler angezeigt: "Nicht erfasster Syntaxfehler: Unerwartetes Token <".

Ich habe versucht /** @jsx React.DOM */, oben in die JS-Datei einzufügen, aber es wurde nichts behoben. Unten finden Sie die HTML- und JS-Dateien. Irgendwelche Ideen, was falsch läuft?

HTML

<html>
  <head>
    <title>Page</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
    <script src="./lander.js"> </script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        React.render(
            <Lander />,
            document.getElementById('content')
        );
    </script>
  </body>
</html>

JS

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

BEARBEITEN: Ich habe festgestellt, dass ich type="text/jsx"dem Skript-Tag, das meinen Lander-Code enthält , etwas hinzufügen muss . Nachdem ich dies hinzugefügt und neu geladen habe, erhalte ich diese Warnung

"Sie verwenden den JSX-Transformator im Browser. Stellen Sie sicher, dass Sie JSX für die Produktion vorkompilieren - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

gefolgt von diesem Fehler:

"XMLHttpRequest kann die Datei: ///Users/.../lander.js nicht laden. Ursprungsübergreifende Anforderungen werden nur für Protokollschemata unterstützt: http, data, chrome-extension, https, chrome-extension-resource."

Es scheint, dass ich noch etwas tun muss, damit der Browser jsx transform funktioniert, aber ich bin mir nicht sicher, was es ist.

EDIT: OOOOH muss ich es mit MAMP oder so hosten?

— kat
quelle

Wie fügen Sie Ihre "JS" -Datei ein?

— Quentin

1

Sie müssen zusätzlich den folgenden Skriptcode hinzufügen. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </ script >

— Steven

Update 2019 : Das Hinzufügen type="text/babel"zu dem Skript-Tag, in das ich meine JS-Datei importiere, und das Babel-Skript, das @Steven im obigen Kommentar erwähnt hat, hat für mich funktioniert.

— Syknapse

128

UPDATE - Verwenden Sie stattdessen Folgendes:

<script type="text/babel" src="./lander.js"></script>

Fügen Sie type="text/jsx"als Attribut des scriptTags hinzu, das zum Einschließen der JavaScript-Datei verwendet wird, die von JSX Transformer wie folgt transformiert werden muss:

<script type="text/jsx" src="./lander.js"></script>

Anschließend können Sie MAMP oder einen anderen Dienst verwenden, um die Seite auf localhost zu hosten, sodass alle Einschlüsse funktionieren, wie hier beschrieben .

Vielen Dank für all die Hilfe an alle!

— kat
quelle

3

python -m SimpleHTTPServer 8080wird häufig verwendet, da Sie keinen persistenten Server wie Apache installieren, ausführen und konfigurieren müssen.

— Brigand

3

Funktioniert perfekt, ich habe gerade den text/jsxAttributwert hinzugefügt

— William

27

JSTransform ist veraltet . Verwenden Sie stattdessen babel.

<script type="text/babel" src="./lander.js"></script>

— Pumych
quelle

21

Fügen Sie type="text/babel"als Attribut des Skript-Tags Folgendes hinzu:

<script type="text/babel" src="./lander.js"></script>

— NAVIN SINGH BISHT
quelle

13

Fügen Sie type="text/babel"dem Skript, das die JSX-Datei enthält, Folgendes hinzu und fügen Sie Folgendes hinzu: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
quelle

3

Für Version 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>wie hier erwähnt

— user3405291

4

Wenn Sie so etwas haben

Uncaught SyntaxError: embedded: Unexpected token

Sie haben wahrscheinlich an einem Ort wie diesem ein Komma verpasst:

  var CommentForm = React.createClass({
  getInitialState: function() {
      return {author: '', text: ''};

  }, // <---- DON'T FORGET THE COMMA

  render: function() {
      return (
      <form className="commentForm">
          <input type="text" placeholder="Nombre" />
          <input type="text" placeholder="Qué opina" />
          <input type="submit" value="Publicar" />
      </form>
      )
  }
  });

— e18r
quelle

2

Sofortige Lösung.)

— Zoltán

3

Der Code, den Sie haben, ist korrekt. JSX-Code muss zu JS kompiliert werden:

http://facebook.github.io/react/jsx-compiler.html

— stewart715
quelle

es versucht, jetzt bin ich nur immer „Uncaught Syntaxerror: unerwartetes Token ILLEGAL“

— kat

Verwenden Sie Chrom? Gibt es Ihnen eine Zeilennummer und einen Hinweis auf einen bestimmten Code?

— Stewart715

Mein schlechtes, ich kann keine Zeilenumbrüche machen, ohne ihnen zu entkommen, also musst du sie mit +... aktualisieren. Aktualisiert sollte jetzt funktionieren.

— Stewart715

Jetzt erhalte ich Folgendes: "Nicht erfasster Fehler: Unveränderliche Verletzung: ReactCompositeComponent.render (): Eine gültige ReactComponent muss zurückgegeben werden. Möglicherweise haben Sie undefiniert, ein Array oder ein anderes ungültiges Objekt zurückgegeben." scheint wie eine Zeichenfolge keine gültige reagieren Komponente

— kat

Ah, ich weiß, was hier los ist ... Sie müssen Ihren jsx-Reaktionscode in Javascript kompilieren ... machen Sie das oder laufen Sie direkt im Browser?

— Stewart715

3

Wenn Sie einen Fehler wie diesen erhalten:

SyntaxError: eingebettet: Unerwartetes Token (107: 9) 105

Möglicherweise fehlt Ihnen eine geschweifte Klammer

— Lord Darth Vader
quelle

1

Versuchen Sie es mit einem Webpack, es hat das ähnliche Problem in meinem Projekt gelöst. Speziell der Teil "Presets".

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },

— Prabhatojha
quelle

0

Ich habe das gleiche Problem mit Ihnen und ich habe etwas auf meinem Server geändert

Sie könnten dies versuchen

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

— Dee Jee
quelle

In der ursprünglichen Frage wurde express.js nicht verwendet. Können Sie erklären, wie das Problem dadurch behoben wird?

— Jonathan Rosa