ReactJS: "Yakalanmamış SyntaxError: Beklenmeyen simge <"

110

ReactJS'de bir site oluşturmaya başlamaya çalışıyorum. Ancak, JS'mi ayrı bir dosyaya koymaya çalıştığımda, şu hatayı almaya başladım: "Yakalanmamış SyntaxError: Beklenmeyen simge <".

/** @jsx React.DOM */JS dosyasının üstüne eklemeyi denedim , ancak hiçbir şeyi düzeltmedi. Aşağıda HTML ve JS dosyaları bulunmaktadır. Neyin yanlış gittiğine dair bir fikriniz var mı?

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

DÜZENLEME: type="text/jsx"Lander kodumu içeren komut dosyası etiketine eklemem gerektiğini fark ettim . Ancak bunu ekledikten ve yeniden yükledikten sonra bu uyarıyı alıyorum

"Tarayıcı içi JSX dönüştürücüyü kullanıyorsunuz. JSX'inizi üretim için önceden derlediğinizden emin olun - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

ardından bu hata:

"XMLHttpRequest file: ///Users/.../lander.js'yi yükleyemiyor. Kaynaklar arası istekler yalnızca protokol şemaları için desteklenir: http, data, chrome-extension, https, chrome-extension-resource."

tarayıcıda jsx dönüşümü çalışması yapmak için yapmam gereken başka bir şey var gibi görünüyor, ancak ne olduğundan emin değilim.

DÜZENLEME: OOOOH, MAMP veya başka bir şey kullanarak barındırmam gerekiyor mu?

— kat
kaynak

"JS" dosyanızı nasıl dahil ediyorsunuz?

— Quentin

1

Ek olarak aşağıdaki komut dosyasını eklemeniz gerekir. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

2019 güncellemesi : type="text/babel"JS dosyamı içe aktardığım betik etiketine ve yukarıdaki yorumda belirtilen @Steven'ın benim için çalıştığı Babel betiğine ekleme.

— Syknapse

129

GÜNCELLEME - bunun yerine şunu kullanın:

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

JSX Transformer tarafından dönüştürülmesi gereken JavaScript dosyasını dahil etmek için kullanılan etiketin type="text/jsx"bir niteliği olarak ekleyin script, örneğin:

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

Ardından, sayfayı localhost'ta barındırmak için MAMP veya başka bir hizmeti kullanabilirsiniz, böylece burada tartışıldığı gibi tüm dahil etme işlemleri çalışır .

Yardımlarınız için herkese teşekkürler!

— kat
kaynak

3

python -m SimpleHTTPServer 8080apache gibi kalıcı bir sunucu kurmanız, çalıştırmanız ve yapılandırmanız gerekmediğinden yaygın olarak kullanılır.

— Brigand

3

Mükemmel çalışıyor, az önce text/jsxöznitelik değerini ekledim

— William

27

JSTransform kullanımdan kaldırıldı , lütfen onun yerine babel kullanın.

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

— Pumych
kaynak

21

type="text/babel"Komut dosyası etiketinin bir niteliği olarak ekleyin , örneğin:

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

— NAVIN SINGH BISHT
kaynak

13

Ekle type="text/babel".jsx dosyası içerir ve bu eklenti senaryoya: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

— AlexGH
kaynak

3

Sürüm 6 için: burada<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> bahsedildiği gibi

— user3405291

4

Gibi bir şeyin varsa

Uncaught SyntaxError: embedded: Unexpected token

Muhtemelen böyle bir yerde virgül atlamışsınızdır:

  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
kaynak

2

Anında çözüm.)

— Zoltán

3

Sahip olduğunuz kod doğru. JSX kodunun JS'ye derlenmesi gerekir:

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

— stewart715
kaynak

denedim, şimdi sadece "Yakalanmamış Sözdizimi Hatası: Beklenmeyen belirteç ILLEGAL" alıyorum

— kat

krom kullanıyormusun size bir satır numarası veriyor ve belirli bir kodu gösteriyor mu?

— stewart715

benim hatam, onlardan kaçmadan satır sonları yapamazsınız, bu yüzden onları bir araya getirmeniz gerekiyor +... şimdi güncellenmeli.

— stewart715

Şimdi şunu alıyorum: "Yakalanmamış Hata: Değişmez İhlal: ReactCompositeComponent.render (): Geçerli bir ReactComponent döndürülmelidir. Tanımlanmamış, bir dizi veya başka bir geçersiz nesne döndürmüş olabilirsiniz." Dize geçerli bir tepki bileşeni değilmiş gibi görünüyor

— kat

Ah, burada neler olduğunu biliyorum ... jsx tepki kodunuzu javascript'e derlemeniz gerekiyor ... bunu yapıyor musunuz yoksa doğrudan tarayıcıda mı çalıştırıyorsunuz?

— stewart715

3

Bunun gibi bir hata alıyorsanız:

Sözdizimi Hatası: katıştırılmış: Beklenmeyen belirteç (107: 9) 105

Kıvrımlı bir parantez eksik olabilir

— Lord Darth Vader
kaynak

1

Web paketine eklemeyi deneyin, projemdeki benzer sorunu çözdü. Özellikle "ön ayarlar" bölümü.

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

— prabhatojha
kaynak

0

Seninle aynı sorunu yaşıyorum ve sunucumdaki bir şeyi değiştirdim

bunu deneyebilirsin

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

— Dee Jee
kaynak

Orijinal soru express.js kullanmıyordu; bunun sorunu nasıl çözdüğünü açıklayabilir misiniz?

— Jonathan Rosa