เซิร์ฟเวอร์แสดงผล SyntaxError ด้วย React/Redux/Express

ฉันกำลังพยายามรับการเรนเดอร์แอปจากเซิร์ฟเวอร์ ดังนั้นจึงพยายามใช้ตัวอย่าง ServerRendering จากที่นี่: http://redux.js.org/docs/recipes/ServerRendering.html

ฉันสามารถรัน server.js ได้สำเร็จ แต่ได้รับข้อผิดพลาด "Uncaught SyntaxError: Unexpected token ‹" @ Bundle.js:2 เมื่อฉันโหลด localhost ฉันเชื่อว่ามันเกี่ยวข้องกับฟังก์ชัน renderFullPage():

function renderFullPage(html, initialState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
        </script>
        <script src="/dist/bundle.js"></script>
      </body>
    </html>
    `
}

ถ้าฉันลบบรรทัด <script src="/dist/bundle.js"></script> ข้อผิดพลาดจะหายไป แต่ตัวนับไม่ทำงาน

นี่คือ Bundle.js ที่ข้อผิดพลาดอ้างอิงถึง:

bundle.js

มันควรจะอ้างอิงถึง Bundle.js ในโฟลเดอร์ dist ของฉัน แต่ไม่ใช่ด้วยเหตุผลบางอย่างใช่ไหม หากฉันสร้างไฟล์ index.html เหมือนกับไฟล์ที่ renderFullPage ส่งคืนทุกประการ ยกเว้นการลบ ${html} และ <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

จากนั้นตัวนับก็ทำงานได้ดี เมื่อฉันทำการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ดูเหมือนว่าไคลเอนต์จะไม่พบโค้ด Bundle.js ดังนั้นให้สร้างโค้ดที่มีโค้ดเดียวกันกับที่ได้รับจากเซิร์ฟเวอร์ทุกประการ และเกิดข้อผิดพลาดขณะรันเป็น html เมื่อ มันคาดหวังจาวาสคริปต์


reactjs redux react-redux express
person Data_Crusader    schedule 29.03.2016    source แหล่งที่มา
comment
ถ้าฉันลบบรรทัดข้อผิดพลาดจะหายไป แต่ตัวนับไม่ทำงาน คุณกำลังพูดถึงบรรทัดไหน?   -  person David    schedule 29.03.2016
comment
‹script src=/dist/bundle.js›‹/script› ฉันคิดว่าปัญหาคือไคลเอนต์ไม่รับไฟล์ /dist/bundle.js ซึ่งเป็นไฟล์ที่ webpack ของฉันส่งออกไป   -  person Data_Crusader    schedule 29.03.2016
comment
ฮะ... นั่นไม่ปรากฏให้ผมเห็นมาก่อน... ขอโทษครับ   -  person David    schedule 29.03.2016
comment
ตอนส่งครั้งแรกลืมใส่ทีหลัง   -  person Data_Crusader    schedule 29.03.2016
comment
I can successfully run server.js ฉันไม่เห็นด้วย คุณอาจสามารถฟังพอร์ตได้ แต่เมื่อคุณมีส่วนร่วมกับ server.js สำหรับคำขอ มันก็จะพังทลายลง คุณกำลังเขียน ES6 หรือ ES5 หรือไม่?   -  person lux    schedule 30.03.2016

คำตอบ (1)


arrow_upward
1
arrow_downward

เนื่องจาก bundle.js ของคุณมี HTML แทนที่จะเป็นสคริปต์ฝั่งไคลเอ็นต์ คุณใช้เส้นทางที่รับทั้งหมดและไม่ปล่อยให้โหลดสินทรัพย์คงที่ของคุณหรือไม่? การเรียก express.static มิดเดิลแวร์ use ของคุณควรอยู่ก่อนโค้ดบิตนี้ (ลำดับมิดเดิลแวร์มีความสำคัญ)

person Steven    schedule 29.03.2016