ReactJS: „Uncaught SyntaxError: Nieoczekiwany token <”

110

Próbuję zacząć budować witrynę w ReactJS. Jednak kiedy próbowałem umieścić mój JS w oddzielnym pliku, zacząłem otrzymywać ten błąd: „Uncaught SyntaxError: Uknown token <”.

Próbowałem dodać /** @jsx React.DOM */na początku pliku JS, ale to niczego nie naprawiło. Poniżej znajdują się pliki HTML i JS. Jakieś pomysły, co się dzieje?

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

EDYCJA: Zdałem sobie sprawę, że muszę dodać type="text/jsx"do tagu skryptu, który zawiera mój kod lądownika. Jednak po dodaniu tego i ponownym załadowaniu otrzymuję to ostrzeżenie

„Używasz transformatora JSX w przeglądarce. Pamiętaj, aby wstępnie skompilować swój JSX do produkcji - http://facebook.github.io/react/docs/tooling-integration.html#jsx ”

po którym następuje ten błąd:

„XMLHttpRequest nie może załadować pliku: ///Users/.../lander.js. Żądania z różnych źródeł są obsługiwane tylko w przypadku schematów protokołów: http, dane, rozszerzenie chrome, https, zasób rozszerzenia chrome.”

wygląda na to, że jest coś jeszcze, co muszę zrobić, aby transformacja jsx w przeglądarce działała, ale nie jestem pewien, co to jest.

EDYCJA: OOOOH czy muszę go hostować przy użyciu MAMP czy czegoś podobnego?

javascript html reactjs react-jsx kat
źródło
Jak dołączasz plik „JS”?
Quentin
1
Musisz dodatkowo dodać następujący kod skryptu. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >
Steven
Aktualizacja 2019 : Dodanie type="text/babel"do tagu skryptu, w którym importuję mój plik JS i skrypt Babel, o którym @Steven wspomniał w powyższym komentarzu, działało dla mnie.
Syknapse

Odpowiedzi:

129

UPDATE - użyj tego zamiast tego:

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

Dodaj type="text/jsx"jako atrybut scripttagu używanego do dołączenia pliku JavaScript, który musi zostać przekształcony przez JSX Transformer, na przykład:

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

Następnie możesz użyć MAMP lub innej usługi do hostowania strony na hoście lokalnym, aby wszystkie inkluzje działały, jak omówiono tutaj .

Dziękuję wszystkim za pomoc!

kat
źródło
3
python -m SimpleHTTPServer 8080jest powszechnie używany, ponieważ nie musisz instalować, uruchamiać i konfigurować trwałego serwera, takiego jak Apache.
Brigand
3
Działa idealnie, właśnie dodałem text/jsxwartość atrybutu
William,
27

JSTransform jest przestarzały , zamiast tego użyj babel.

<script type="text/babel" src="./lander.js"></script>
Pumych
źródło
21

Dodaj type="text/babel"jako atrybut tagu skryptu, na przykład:

<script type="text/babel" src="./lander.js"></script>
NAVIN SINGH BISHT
źródło
13

Dodaj type="text/babel"do skryptu zawierającego plik .jsx i dodaj to: <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

AlexGH
źródło
3
Wersja 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>jak wspomniano tutaj
user3405291
4

Jeśli masz coś takiego

Uncaught SyntaxError: embedded: Unexpected token

Prawdopodobnie przegapiłeś przecinek w takim miejscu:

  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
źródło
2
Natychmiastowe rozwiązanie.)
Zoltán
3

Twój kod jest poprawny. Kod JSX należy skompilować do JS:

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

stewart715
źródło
próbowałem, teraz po prostu otrzymuję komunikat „Uncaught SyntaxError: Nieoczekiwany token ILLEGAL”
kat
czy używasz chrome? czy podaje numer linii i wskazuje na konkretny kod?
stewart715
mój błąd, nie mogę zrobić łamania linii bez ucieczki przed nimi, więc musisz je połączyć z +... zaktualizowane powinno teraz działać.
stewart715
Teraz otrzymuję następujący komunikat: „Nieprzechwycony błąd: niezmienione naruszenie: ReactCompositeComponent.render (): Należy zwrócić prawidłowy składnik ReactComponent. Możliwe, że zwrócono wartość undefined, tablicę lub inny nieprawidłowy obiekt”. wygląda na to, że ciąg nie jest prawidłowym składnikiem reakcji
kat.
Ach, wiem, co się tutaj dzieje ... musisz skompilować swój kod reakcji jsx do javascript ... robisz to czy uruchamiasz bezpośrednio w przeglądarce?
stewart715
3

Jeśli otrzymujesz taki błąd:

SyntaxError: embedded: Nieoczekiwany token (107: 9) 105

Możliwe, że brakuje Ci nawiasu klamrowego

Lord Darth Vader
źródło
1

Spróbuj dodać webpack, rozwiązało to podobny problem w moim projekcie. Szczególnie część „presetów”.

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },
prabhatojha
źródło
0

Mam z tobą ten sam problem i zmieniłem coś na swoim serwerze

możesz spróbować tego

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});
Dee Jee
źródło
Oryginalne pytanie nie używało express.js; czy możesz wyjaśnić, jak to rozwiązuje problem?
Jonathan Rosa