ReactJS: "बिना पढ़ा हुआ वाक्य रचना: अप्रत्याशित टोकन <"

110

मैं ReactJS में साइट बनाने की कोशिश कर रहा हूं। हालांकि, जब मैंने अपने जेएस को एक अलग फाइल में डालने की कोशिश की, तो मुझे यह त्रुटि मिलनी शुरू हो गई: "अनटॉक्ड सिंटैक्स्योर: अनपेक्षित टोकन <"।

मैंने /** @jsx React.DOM */JS फ़ाइल के शीर्ष में जोड़ने का प्रयास किया, लेकिन यह कुछ भी ठीक नहीं किया। नीचे HTML और JS फाइलें हैं। क्या गलत हो रहा है के रूप में किसी भी विचार?

एचटीएमएल

<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>

जे एस

/**
 * @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"स्क्रिप्ट टैग में जोड़ना होगा जिसमें मेरा लैंडर कोड शामिल है। हालाँकि, इसे जोड़ने और पुनः लोड करने के बाद मुझे यह चेतावनी मिलती है

"आप इन-ब्राउज़र जेएसएक्स ट्रांसफार्मर का उपयोग कर रहे हैं। उत्पादन के लिए अपने जेएसएक्स को पूर्वनिर्धारित करना सुनिश्चित करें - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

इस त्रुटि के बाद:

"XMLHttpRequest फ़ाइल लोड नहीं कर सकता: ///Users/../lander.js। क्रॉस मूल अनुरोध केवल प्रोटोकॉल योजनाओं के लिए समर्थित हैं: http, डेटा, क्रोम-एक्सटेंशन, https, क्रोम-एक्सटेंशन-संसाधन।"

ऐसा लगता है कि ब्राउज़र jsx ट्रांसफ़ॉर्मिंग वर्किंग में आने के लिए मुझे कुछ और करना होगा, लेकिन मुझे यकीन नहीं है कि यह क्या है।

संपादित करें: OOOOH क्या मुझे इसे MAMP या कुछ और का उपयोग करके होस्ट करने की आवश्यकता है?

javascript  html  reactjs  react-jsx 
— कैट
स्रोत
आप अपनी "JS" फ़ाइल को कैसे शामिल कर रहे हैं?
— क्वेंटिन
1
इसके अलावा आपको निम्नलिखित स्क्रिप्ट कोड जोड़ना होगा। <script src = " unpkg.com/@babel/standalone/babel.min.js " > बुटिक / सिस्क्रिप्ट >
— स्टीवन
2019 अपडेट : type="text/babel"स्क्रिप्ट टैग को जोड़ना जहां मैं अपनी जेएस फाइल और बाबेल स्क्रिप्ट आयात कर रहा हूं जो @Steven ने ऊपर टिप्पणी में उल्लेख किया है, मेरे लिए काम कर रहा है।
— साइकेनैप्स

जवाबों:

128

अद्यतन - इसके बजाय इसका उपयोग करें:

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

जावास्क्रिप्ट फ़ाइल को शामिल करने type="text/jsx"के scriptलिए उपयोग किए जाने वाले टैग की एक विशेषता के रूप में जोड़ें , जिसे JSX ट्रांसफार्मर द्वारा बदलना चाहिए, जैसे:

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

फिर आप स्थानीय होस्ट पर पेज को होस्ट करने के लिए MAMP या किसी अन्य सेवा का उपयोग कर सकते हैं ताकि सभी निष्कर्षों पर काम हो, जैसा कि यहां चर्चा की गई है ।

सारी मदद के लिए सभी का धन्यवाद!

— कैट
स्रोत
3
python -m SimpleHTTPServer 8080आमतौर पर उपयोग किया जाता है क्योंकि आपको अपाचे जैसे एक स्थायी सर्वर को स्थापित, चलाने और कॉन्फ़िगर करने की आवश्यकता नहीं है।
— ब्रिगैंड
3
पूरी तरह से काम करता है, मैंने सिर्फ text/jsxविशेषता मान जोड़ा
— विलियम
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
तत्काल समाधान।)
— ज़ोल्टन
3

आपके पास कोड सही है। JSX कोड को JS में संकलित करने की आवश्यकता है:

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

— stewart715
स्रोत
यह कोशिश की, अब मैं सिर्फ "बिना पढ़ा हुआ वाक्य रचना: अनपेक्षित टोकन ILLEGAL" प्राप्त कर रहा हूं
— kat
क्या आप क्रोम का उपयोग कर रहे हैं? क्या यह आपको एक लाइन नंबर देता है और विशिष्ट कोड को इंगित करता है?
— stewart715
मेरा बुरा, उन्हें भागने के बिना लाइन ब्रेक नहीं कर सकता है, इसलिए आपको उनके साथ संक्षिप्त करने की आवश्यकता है +... अपडेट अब काम करना चाहिए।
— stewart715
अब मैं इसे प्राप्त कर रहा हूं: "अनकवर्ड एरर: इनवायरेंट वायलेशन: ReactCompositeComponent.render (): एक वैध ReactComponent को लौटाया जाना चाहिए। आप अपरिभाषित, किसी सरणी या कुछ अन्य अमान्य ऑब्जेक्ट को लौटा सकते हैं।" लगता है जैसे एक स्ट्रिंग एक वैध प्रतिक्रिया घटक नहीं है
— kat
आह मुझे पता है कि यहाँ क्या हो रहा है ... आपको अपने jsx प्रतिक्रिया कोड को जावास्क्रिप्ट में संकलित करने की आवश्यकता है ... क्या आप ऐसा कर रहे हैं या सीधे ब्राउज़र में चल रहे हैं?
— stewart715
3

यदि आपको इस तरह की त्रुटि हो रही है:

SyntaxError: एम्बेडेड: अप्रत्याशित टोकन (107: 9) 105

यह हो सकता है कि आप एक घुंघराले ब्रैकेट को याद कर रहे हों

— लॉर्ड डार्थ वडर
स्रोत
1

वेबपैक में जोड़ने का प्रयास करें, इसने मेरी परियोजना में इसी तरह की समस्या को हल किया। विशेष रूप से "प्रीसेट" भाग।

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },
— prabhatojha
स्रोत
0

मेरे पास आपके साथ एक ही मुद्दा है और मैंने अपने सर्वर में कुछ परिवर्तन किया है

आप यह कोशिश कर सकते हैं

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});
— डी जी
स्रोत
मूल प्रश्न में एक्सप्रेस.जेएस का उपयोग नहीं किया गया था; क्या आप बता सकते हैं कि यह समस्या को कैसे ठीक करता है?
— जोनाथन रोजा
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.