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?

javascript html reactjs react-jsx 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

Antworten:

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/[email protected]/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