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?

— 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

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/babel-core@5.8.38/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