Reactjs: Kesalahan token '<' tak terduga

99

saya baru saja memulai dengan Reactjs dan sedang menulis komponen sederhana untuk menampilkan
litag dan menemukan kesalahan ini:

Token tak terduga '<'

Saya telah meletakkan contoh di jsbin di bawah ini http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Tolong beritahu saya apa yang saya lakukan salah.

reactjs sam
sumber

Jawaban:

30

UPDATE: Di React 0.12+, JSX pragma tidak lagi diperlukan.

Pastikan menyertakan pragma JSX di bagian atas file Anda:

/** @jsx React.DOM */

Tanpa baris ini, jsxtrafo biner dan dalam browser akan membiarkan file Anda tidak berubah.

Sophie Alpert
sumber
10
Tetapi <script type = "text / jsx"> adalah
xavier
4
menggunakan babel saya harus melempar type="text/babel". Dunia baru yang berani dari javascript
Connor Leech
ini membantu dalam keadaan saya: stackoverflow.com/questions/33460420/…
timhc22
28

Masalah Token tak terduga '<' terjadi karena prasetel babel tidak ada.

Solusi: Anda harus mengkonfigurasi konfigurasi webpack Anda sebagai berikut

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

di sini .jsx memeriksa format .js dan .jsx.

Anda cukup menginstal ketergantungan babel menggunakan node sebagai berikut

npm install babel-preset-react

Terima kasih

Nuwa
sumber
Tidak ada satupun pertanyaan yang menunjukkan bahwa poster asli menggunakan babel.
ivarni
Dia mengatakan dia baru saja memulai dengan Reactjs, karena preset babel React harus digunakan. Mungkin konfigurasi webpack melewatkan preset babel
Nuwa
Tidak ada pertanyaan yang menunjukkan bahwa poster asli menggunakan webpack juga. Tak satu pun dari itu diperlukan untuk bekerja dengan React meskipun keduanya berguna.
ivarni
4
@Nuwa terima kasih. npm install babel-preset-reactmemecahkan masalah saya.
Yasin Yörük
4
jika Anda memiliki .babelrcfile dalam proyek "presets": ["env", "react", "es2015"]itu saja !!
Byron Lopez
21

dalam kasus saya, saya gagal memasukkan atribut type pada tag skrip saya.

<script type="text/jsx">
Sean M
sumber
7

Anda perlu mentranspilasi / mengkompilasi kode JSX tersebut ke javascript atau menggunakan transformator dalam browser

Lihat http://facebook.github.io/react/docs/getting-started.html dan catat <script>tagnya, Anda memerlukan tag yang disertakan agar JSX berfungsi di browser.

krs
sumber
Ya saya tahu, di bawah ini adalah tautan
sam
Jsbin itu tampaknya memiliki cara mereka sendiri untuk menjalankan JS, kesalahannya berasal dari dalam kodenya.
krs
Tetapi itu adalah kesalahan yang sama dan pada nomor baris yang sama. Juga, apakah ada alasan lain mengapa kesalahan seperti itu akan terjadi jika saya menggunakan kode yang sama seperti yang diberikan di tautan
sam
jsfiddle.net/9st5Q ini adalah kode Anda di jsfiddle, di mana React berfungsi dengan baik.
krs
7
pastikan Anda menyetel tag type = "text / jsx" di <script type="text/jsx">tag, jika ingin, sisipkan seluruh kode Anda ke dalam paste hastebin.org
krs
7

Saya mengalami kesalahan ini dan tidak dapat menyelesaikannya selama dua hari, jadi perbaikan kesalahannya sangat sederhana. Dalam tubuh, di mana Anda menghubungkan Anda script, tambahkan type="text/jsx"dan ini akan menyelesaikan masalah.

Руслан
sumber
bisakah anda juga memberikan penjelasan untuk jawaban anda?
MMascarin
1
Saya pikir ketika Anda memberi type = "text / jsx" Anda memakai compiler untuk mengetahui jenis dokumen atau file ini.
Руслан
3

Berikut adalah contoh kerja dari jsbin Anda:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

jsx:

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

Jalankan kode ini dari satu file dan Anda seharusnya berfungsi.

myusuf
sumber
2

Jika Anda seperti saya dan rentan terhadap kesalahan konyol, periksa juga package.json Anda jika berisi preset babel Anda:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
wafel merah muda
sumber
1

jika kami mempertimbangkan konfigurasi situs Anda yang sebenarnya, maka Anda perlu menjalankan ReactJS secara langsung

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

dan tambahkan atribut ke file js Anda - type = "text / babel" seperti

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

maka contoh kode di bawah ini akan berfungsi:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
Roma
sumber
1

Gunakan kode berikut. Saya telah menambahkan referensi ke React dan React DOM. Gunakan ES6 / Babel untuk mengubah kode JS Anda menjadi JavaScript vanilla. Perhatikan bahwa metode Render berasal dari ReactDOM dan pastikan bahwa metode render memiliki target yang ditentukan di DOM. Terkadang Anda mungkin menghadapi masalah karena metode render () tidak dapat menemukan elemen target. Ini terjadi karena kode react dijalankan sebelum DOM merender. Untuk mengatasi ini, gunakan jQuery ready () untuk memanggil metode render () dari React. Dengan cara ini Anda akan yakin tentang DOM yang dirender pertama kali. Anda juga dapat menggunakan atribut defer pada skrip aplikasi Anda.

Kode HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>

</body>
</html>

Kode JS:

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

Semoga ini menyelesaikan masalah Anda. :-)

Abhay Shiro
sumber
1

Periksa apakah .babelrc ada di dalam folder root aplikasi Anda, bukan di dalam subfolder. jika itu kasusnya, pindahkan file ke root.

Andrew Okesokun
sumber
0

Anda dapat menggunakan kode seperti ini:

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

Dan jangan lupa tambahkan <div id='main-content'></div>ke bodydalamhtml

Tetapi di file package.json Anda, Anda harus menggunakan dependensi ini:

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

Ini berfungsi untuk saya tetapi saya juga menggunakan webpack, dengan opsi ini (ke webpack.config.js):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
Vitaliy Andrusishyn
sumber
0

Dalam kasus saya, selain babelpreset, saya juga harus menambahkan ini ke saya .eslintrc:

{
  "extends": "react-app",
  ...
}
dferrazm.dll
sumber
0

Saya baru mulai belajar Reacthari ini dan menghadapi masalah yang sama. Di bawah ini adalah kode yang telah saya tulis.

<script type="text/babel">
    class Hello extends React.Component {
        render(){
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
    ReactDOM.render(
        <Hello/>
        document.getElementById('react-container')
    )


</script>

Dan seperti yang Anda lihat, saya melewatkan tanda koma (,) setelah saya gunakan <Hello/>. Dan kesalahan itu sendiri mengatakan baris mana yang perlu kita lihat.

masukkan deskripsi gambar di sini

Jadi begitu saya menambahkan koma sebelum parameter kedua untuk ReactDOM.render()fungsi tersebut, semua mulai bekerja dengan baik.

Sibeesh Venu
sumber
0

inilah cara lain Anda dapat melakukannya html 

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

file index.js dengan jalur src / index.js

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

gunakan package.json ini akan membuat Anda aktif dan berjalan dengan cepat

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}
Snivio
sumber
0

Meskipun, saya memiliki semua pemuat babel yang tepat di file konfigurasi .babelrc saya. Ini membangun script dengan bungkusan-bundler memproduksi token kesalahan tak terduga <dan jenis kesalahan mime di konsol peramban untuk saya pada panduan refresh halaman.

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

Memperbarui skrip build memperbaiki masalah saya.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
Abhijeet
sumber