ReactJS: “Uncaught SyntaxError: Token tak terduga <”

110

Saya mencoba untuk mulai membangun situs di ReactJS. Namun, ketika saya mencoba untuk meletakkan JS saya di file terpisah, saya mulai mendapatkan kesalahan ini: "SyntaxError Tidak Tertangkap: Token tidak terduga <".

Saya mencoba menambahkan /** @jsx React.DOM */ke bagian atas file JS, tetapi tidak memperbaiki apa pun. Di bawah ini adalah file HTML dan JS. Ada ide tentang apa yang salah?

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

EDIT: Saya menyadari bahwa saya perlu menambahkan type="text/jsx"ke tag skrip yang menyertakan kode pendarat saya. Namun, setelah menambahkan ini dan memuat ulang saya mendapatkan peringatan ini

"Anda menggunakan transformator JSX dalam browser. Pastikan untuk mengkompilasi JSX Anda untuk produksi - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

diikuti oleh kesalahan ini:

"XMLHttpRequest tidak dapat memuat file: ///Users/.../lander.js. Permintaan lintas sumber hanya didukung untuk skema protokol: http, data, chrome-extension, https, chrome-extension-resource."

Sepertinya ada hal lain yang perlu saya lakukan agar browser jsx transform berfungsi, tapi saya tidak yakin apa itu.

EDIT: OOOOH apakah saya perlu menyimpannya menggunakan MAMP atau sesuatu?

— kat
sumber

Bagaimana Anda memasukkan file "JS" Anda?

— Quentin

1

Anda perlu menambahkan kode skrip berikut. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

Pembaruan 2019 : Menambahkan type="text/babel"ke tag skrip tempat saya mengimpor file JS saya dan skrip Babel yang disebutkan @Steven dalam komentar di atas berfungsi untuk saya.

— Syknapse

128

UPDATE - gunakan ini sebagai gantinya:

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

Tambahkan type="text/jsx"sebagai atribut dari scripttag yang digunakan untuk menyertakan file JavaScript yang harus diubah oleh JSX Transformer, seperti itu:

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

Kemudian Anda dapat menggunakan MAMP atau layanan lain untuk menghosting halaman di localhost sehingga semua inklusi berfungsi, seperti yang dibahas di sini .

Terima kasih atas semua bantuan semuanya!

— kat
sumber

3

python -m SimpleHTTPServer 8080biasanya digunakan karena Anda tidak perlu menginstal, menjalankan, dan mengkonfigurasi server persisten seperti apache.

— Brigand

3

Bekerja dengan sempurna, saya baru saja menambahkan nilai text/jsxatribut

— William

27

JSTransform tidak digunakan lagi , gunakan babel sebagai gantinya.

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

— Pumych
sumber

21

Tambahkan type="text/babel"sebagai atribut dari tag script, seperti ini:

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

— IKAN NAVIN SINGH
sumber

13

Tambahkan type="text/babel"ke skrip yang menyertakan file .jsx dan tambahkan ini: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
sumber

3

Untuk versi 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>seperti yang disebutkan di sini

— user3405291

4

Jika Anda memiliki sesuatu seperti

Uncaught SyntaxError: embedded: Unexpected token

Anda mungkin melewatkan koma di tempat seperti ini:

  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
sumber

2

Solusi instan.)

— Zoltán

3

Kode yang Anda miliki benar. Kode JSX perlu dikompilasi ke JS:

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

— stewart715
sumber

mencobanya, sekarang saya baru saja mendapatkan "Uncaught SyntaxError: Unexpected token ILLEGAL"

— kat

apakah kamu menggunakan chrome? apakah itu memberi Anda nomor baris dan menunjuk ke kode tertentu?

— stewart715

saya buruk, tidak dapat melakukan jeda baris tanpa menghindarinya sehingga Anda perlu menggabungkannya dengan +... pembaruan harus berfungsi sekarang.

— stewart715

Sekarang saya mendapatkan ini: "Kesalahan Tidak Tertangkap: Pelanggaran Invarian: ReactCompositeComponent.render (): ReactComponent yang valid harus dikembalikan. Anda mungkin telah mengembalikan undefined, array, atau objek tidak valid lainnya." Sepertinya string bukanlah komponen react yang valid

— kat

Ah saya tahu apa yang terjadi di sini ... Anda perlu mengkompilasi kode reaksi jsx Anda ke dalam javascript ... apakah Anda melakukan itu atau menjalankan langsung di browser?

— stewart715

3

Jika Anda mendapatkan kesalahan seperti ini:

SyntaxError: tertanam: Token tak terduga (107: 9) 105

Bisa jadi Anda kehilangan tanda kurung kurawal

— Lord Darth Vader
sumber

1

Coba tambahkan di webpack, ini memecahkan masalah serupa dalam proyek saya. Khususnya bagian "preset".

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

— prabhatojha
sumber

0

Saya memiliki masalah yang sama dengan Anda dan saya telah mengubah sesuatu di server saya

Anda bisa mencoba ini

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

— Dee Jee
sumber

Pertanyaan asli tidak menggunakan express.js; dapatkah Anda menjelaskan bagaimana cara ini memperbaiki masalah?

— Jonathan Rosa