Reactjs: nieoczekiwany token „<” Błąd

Odpowiedzi:

57

Rozwiązałem to używając type = "text / babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>
Yuliia Ashomok
źródło
1
Zgadza się, użyj „text / babel” zamiast „text / jsx”. Odwołaj się do podstawowego adresu
Kent Aguilar
30

AKTUALIZACJA: W React 0.12+ pragma JSX nie jest już potrzebna.

Upewnij się, że na początku plików umieszczasz pragmę JSX:

/** @jsx React.DOM */

Bez tej linii jsxbinarny i działający w przeglądarce transformator pozostawi Twoje pliki bez zmian.

Sophie Alpert
źródło
10
Ale <script type = "text / jsx"> to
xavier
4
używając babel musiałem dorzucić type="text/babel". Nowy wspaniały świat javascript
Connor Leech
to pomogło w moich okolicznościach: stackoverflow.com/questions/33460420/…
timhc22
28

Problem Nieoczekiwany token „<” jest spowodowany brakiem ustawienia Babel.

Rozwiązanie: Musisz skonfigurować konfigurację pakietu internetowego w następujący sposób

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

tutaj .jsx sprawdza oba formaty .js i .jsx.

możesz po prostu zainstalować zależność babel za pomocą węzła w następujący sposób

npm install babel-preset-react

Dziękuję Ci

Nuwa
źródło
W pytaniu nic nie wskazuje na to, że oryginalny plakat używa babel.
ivarni
Powiedział, że dopiero zaczyna pracę z Reactjsem, ponieważ ustawienie wstępne babel w React musi być używane.Może być konfiguracją webpacka brakowało ustawienia wstępnego babel
Nuwa
W pytaniu nie ma nic wskazującego, że oryginalny plakat również używa webpacka. Żadne z nich nie jest wymagane do pracy z Reactem, chociaż oba są przydatne.
ivarni
4
@Nuwa dziękuję. npm install babel-preset-reactrozwiązał mój problem.
Yasin Yörük
4
jeśli masz .babelrcplik w projekcie "presets": ["env", "react", "es2015"]i to wszystko !!
Byron Lopez
21

w moim przypadku nie udało mi się dołączyć atrybutu type do tagu skryptu.

<script type="text/jsx">
Sean M.
źródło
7

Musisz przetransponować / skompilować ten kod JSX do javascript lub użyć transformatora w przeglądarce

Spójrz na http://facebook.github.io/react/docs/getting-started.html i zwróć uwagę na <script>tagi, potrzebujesz tych, które są dołączone, aby JSX działał w przeglądarce.

krs
źródło
Tak, wiem, poniżej jest zaktualizowany link
sam
Wydaje się, że jsbin ma swój własny sposób wykonywania JS, błąd pochodzi z ich kodu.
krs
Ale jest to ten sam błąd i ten sam numer linii. Czy jest też jakiś inny powód, dla którego taki błąd wystąpi, jeśli używam tego samego kodu, co podany w linku
sam
jsfiddle.net/9st5Q tutaj jest twój kod w jsfiddle, gdzie React działa dobrze.
krs
7
upewnij się, że ustawienie type = „text / JSX” w <script type="text/jsx">znaczniku, jeśli chcesz proszę wkleić cały kod do wklejenia hastebin.org
krs
7

Mam ten błąd i nie mogłem go rozwiązać przez dwa dni, więc naprawa błędu jest bardzo prosta. W ciele, gdzie podłączasz swoje script, dodaj type="text/jsx"i to rozwiąże problem.

Руслан
źródło
czy możesz również wyjaśnić swoją odpowiedź?
MMascarin
1
Myślę, że kiedy podajesz type = "text / jsx", nosiłeś kompilator, aby wiedzieć, jaki to typ dokumentu lub pliku.
Руслан
3

Oto działający przykład z twojego jsbin:

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>

Uruchom ten kod z jednego pliku i Twój powinien działać.

myusuf
źródło
2

Jeśli jesteś podobny do mnie i masz skłonność do głupich błędów, sprawdź również swój plik package.json, jeśli zawiera on ustawienia Babel:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
różowe wafle
źródło
1

jeśli weźmiemy pod uwagę twoją prawdziwą konfigurację witryny, to musisz uruchomić ReactJS w głowie

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

i dodaj atrybut do swojego pliku js - type = "text / babel" jak

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

wtedy poniższy przykład kodu zadziała:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
rzymski
źródło
1

Użyj poniższego kodu. Dodałem odniesienie do React i React DOM. Użyj ES6 / Babel, aby przekształcić swój kod JS w zwykły JavaScript. Zauważ, że metoda Render pochodzi z ReactDOM i upewnij się, że metoda renderowania ma cel określony w DOM. Czasami możesz napotkać problem polegający na tym, że metoda render () nie może znaleźć elementu docelowego. Dzieje się tak, ponieważ kod React jest wykonywany przed renderowaniem DOM. Aby temu przeciwdziałać, użyj jQuery ready () do wywołania metody render () React. W ten sposób będziesz mieć pewność, że DOM będzie renderowany jako pierwszy. Możesz również użyć atrybutu odroczenia w skrypcie aplikacji.

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

Kod JS:

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

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

Mam nadzieję, że to rozwiąże Twój problem. :-)

Abhay Shiro
źródło
1

Sprawdź, czy plik .babelrc znajduje się w głównym folderze aplikacji, a nie w podfolderze. jeśli tak jest, przenieś plik do katalogu głównego.

Andrew Okesokun
źródło
0

Możesz użyć takiego kodu:

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

I nie zapomnij dodać <div id='main-content'></div>dobody w swoimhtml

Ale w pliku package.json powinieneś użyć następujących zależności:

  "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",
...
}

To działa dla mnie, ale użyłem również webpacka, z następującymi opcjami (w 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
źródło
0

W moim przypadku oprócz babelpresetów musiałem też dodać to do mojego .eslintrc:

{
  "extends": "react-app",
  ...
}
dferrazm
źródło
0

Właśnie Reactdzisiaj zacząłem się uczyć i miałem ten sam problem. Poniżej znajduje się kod, który napisałem.

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

A jak widać, po użyciu ominąłem przecinek (,) <Hello/>. A sam błąd mówi, w której linii mamy szukać.

wprowadź opis obrazu tutaj

Więc kiedy dodam przecinek przed drugim parametrem ReactDOM.render()funkcji, wszystko zaczęło działać dobrze.

Sibeesh Venu
źródło
0

oto inny sposób, w jaki możesz to zrobić html 

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

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

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

</html>

Plik index.js ze ścieżką 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"));

użyj tego pakietu. json szybko uruchomi Cię

{
  "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
źródło
0

Chociaż miałem wszystkie właściwe programy ładujące Babel w moim pliku konfiguracyjnym .babelrc. Ten skrypt kompilacji z pakietem paczek generował nieoczekiwany błąd tokenu <i błędy typu MIME w konsoli przeglądarki podczas odświeżania strony podręcznika.

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

Zaktualizowanie skryptu kompilacji rozwiązało problemy.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
Abhijeet
źródło