ReactJS:“ Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด <”

111

ฉันกำลังพยายามเริ่มสร้างไซต์ใน ReactJS อย่างไรก็ตามเมื่อฉันพยายามใส่ JS ของฉันในไฟล์แยกต่างหากฉันเริ่มได้รับข้อผิดพลาดนี้: "Uncaught SyntaxError: Uncaught SyntaxError: Uncaught token <"

ฉันพยายามเพิ่ม/** @jsx React.DOM */ที่ด้านบนของไฟล์ JS แต่ก็ไม่ได้แก้ไขอะไร ด้านล่างนี้คือไฟล์ HTML และ JS มีความคิดว่าเกิดอะไรขึ้น?

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

แก้ไข: ฉันตระหนักว่าฉันต้องเพิ่มtype="text/jsx"แท็กสคริปต์ซึ่งรวมถึงรหัสแลนเดอร์ของฉัน อย่างไรก็ตามหลังจากเพิ่มสิ่งนี้และโหลดซ้ำฉันได้รับคำเตือนนี้

"คุณกำลังใช้ตัวแปลง JSX ในเบราว์เซอร์อย่าลืมคอมไพล์ JSX ไว้ล่วงหน้าสำหรับการผลิต - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

ตามด้วยข้อผิดพลาดนี้:

"XMLHttpRequest ไม่สามารถโหลดไฟล์: ///Users/.../lander.js คำขอที่มาข้ามได้รับการสนับสนุนสำหรับโครงร่างโปรโตคอลเท่านั้น: http, data, chrome-extension, https, chrome-extension-resource"

ดูเหมือนว่ามีอย่างอื่นที่ฉันต้องทำเพื่อให้เบราว์เซอร์ jsx transform ทำงานได้ แต่ฉันไม่แน่ใจว่ามันคืออะไร

แก้ไข: OOOOH ฉันต้องโฮสต์โดยใช้ MAMP หรืออะไร?

— kat
แหล่งที่มา

1

คุณรวมไฟล์ "JS" ของคุณอย่างไร

— Quentin

1

คุณต้องเพิ่มรหัสสคริปต์ต่อไปนี้เพิ่มเติม <script src = " unfkg.com/@babel/standalone/babel.min.js " > </script >

— สตีเวน

การอัปเดต 2019 : การเพิ่มtype="text/babel"แท็กสคริปต์ที่ฉันนำเข้าไฟล์ JS และสคริปต์ Babel ที่ @Steven กล่าวถึงในความคิดเห็นด้านบนใช้ได้ผลสำหรับฉัน

— Syknapse

133

UPDATE - ใช้สิ่งนี้แทน:

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

เพิ่มtype="text/jsx"เป็นแอตทริบิวต์ของscriptแท็กที่ใช้เพื่อรวมไฟล์ JavaScript ที่ต้องแปลงโดย JSX Transformer เช่น:

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

แล้วคุณสามารถใช้ MAMP หรือบริการอื่น ๆ ที่จะเป็นเจ้าภาพหน้าใน localhost เพื่อให้ทุกการทำงานรวมตามที่กล่าวไว้ที่นี่

ขอบคุณสำหรับความช่วยเหลือทุกคน!

— kat
แหล่งที่มา

3

python -m SimpleHTTPServer 8080มักใช้เนื่องจากคุณไม่ต้องติดตั้งเรียกใช้และกำหนดค่าเซิร์ฟเวอร์ถาวรเช่น apache

— Brigand

3

ทำงานได้อย่างสมบูรณ์ฉันเพิ่งเพิ่มtext/jsxค่าแอตทริบิวต์

— William

27

JSTransform เลิกใช้งานแล้วโปรดใช้ Babel แทน

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

— Pumych
แหล่งที่มา

21

เพิ่มtype="text/babel"เป็นแอตทริบิวต์ของแท็กสคริปต์เช่นนี้:

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

— NAVIN SINGH BISHT
แหล่งที่มา

13

เพิ่มtype="text/babel"ลงในสคริปต์ที่มีไฟล์. jsx และเพิ่มสิ่งนี้: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
แหล่งที่มา

3

สำหรับเวอร์ชัน 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>ตามที่กล่าวไว้ที่นี่

— user3405291

4

หากคุณมีสิ่งที่ต้องการ

Uncaught SyntaxError: embedded: Unexpected token

คุณอาจพลาดลูกน้ำในสถานที่เช่นนี้:

  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
แหล่งที่มา

2

แก้ปัญหาได้ทันที)

— Zoltán

3

รหัสที่คุณมีถูกต้อง ต้องคอมไพล์โค้ด JSX เป็น JS:

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

— สจ๊วต 715
แหล่งที่มา

ลองแล้วตอนนี้ฉันเพิ่งได้รับ "Uncaught SyntaxError: Uncaught SyntaxError: Uncaught token ILLEGAL"

— kat

คุณใช้ chrome หรือเปล่า มันให้หมายเลขบรรทัดและชี้ไปที่รหัสเฉพาะหรือไม่?

— stewart715

ฉันไม่ดีไม่สามารถแบ่งบรรทัดได้โดยไม่ต้องหลบหนีดังนั้นคุณต้องต่อด้วย+... อัปเดตควรใช้งานได้แล้ว

— stewart715

ตอนนี้ฉันได้รับสิ่งนี้: "Uncaught Error: Invariant Violation: ReactCompositeComponent.render (): ต้องส่งคืน ReactComponent ที่ถูกต้องคุณอาจส่งคืนไม่ได้กำหนดอาร์เรย์หรือวัตถุอื่น ๆ ที่ไม่ถูกต้อง" ดูเหมือนว่าสตริงไม่ใช่องค์ประกอบการตอบสนองที่ถูกต้อง

— kat

อาฉันรู้ว่าเกิดอะไรขึ้นที่นี่ ... คุณต้องรวบรวมโค้ดตอบกลับ jsx ของคุณลงในจาวาสคริปต์ ... คุณกำลังทำอย่างนั้นหรือเรียกใช้โดยตรงในเบราว์เซอร์?

— stewart715

3

หากคุณได้รับข้อผิดพลาดเช่นนี้:

SyntaxError: ฝัง: โทเค็นที่ไม่คาดคิด (107: 9) 105

อาจเป็นไปได้ว่าคุณไม่มีวงเล็บปีกกา

— ลอร์ดดาร์ ธ เวเดอร์
แหล่งที่มา

1

ลองเพิ่มใน webpack มันแก้ไขปัญหาที่คล้ายกันในโครงการของฉัน โดยเฉพาะส่วน "ค่าที่ตั้งไว้ล่วงหน้า"

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

— พระโพธิญาณ
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันกับคุณและฉันมีการเปลี่ยนแปลงบางอย่างในเซิร์ฟเวอร์ของฉัน

คุณอาจลองทำเช่นนี้

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

— ดีจร้า
แหล่งที่มา

คำถามเดิมไม่ได้ใช้ express.js; คุณช่วยอธิบายวิธีนี้แก้ไขปัญหาได้อย่างไร

— Jonathan Rosa