Reactjs : 예기치 않은 토큰 '<'오류

99

나는 Reactjs로 시작했고
li태그 를 표시하는 간단한 구성 요소를 작성하고 있었고이 오류가 발생했습니다.

예기치 않은 토큰 '<'

http://jsbin.com/UWOquRA/1/edit?html,js,console,output 아래 jsbin에 예제를 넣었습니다.

내가 뭘 잘못하고 있는지 알려주세요.

reactjs 
— 샘
소스

답변:

30

업데이트 : React 0.12+에서는 JSX pragma가 더 이상 필요하지 않습니다.

파일 상단에 JSX pragma를 포함해야합니다.

/** @jsx React.DOM */

이 줄이 없으면 jsx바이너리 및 브라우저 내 변환기가 파일을 변경하지 않고 그대로 둡니다.

— 소피 알퍼트
소스
10
그러나 <스크립트 유형 = "텍스트 / jsx">입니다
— 자비에르
4
바벨을 사용하여 던져야했습니다 type="text/babel". 자바 스크립트의 멋진 새로운 세계
— Connor Leech
이 내 상황에서 도움 : stackoverflow.com/questions/33460420/...
— timhc22
28

예기치 않은 토큰 '<' 문제 는 바벨 사전 설정이 누락 되었기 때문입니다.

해결책 : 다음과 같이 웹팩 구성을 구성해야합니다.

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

여기서 .jsx는 .js 및 .jsx 형식을 모두 확인합니다.

다음과 같이 노드를 사용하여 바벨 종속성을 간단히 설치할 수 있습니다.

npm install babel-preset-react

감사합니다

— 누와
소스
원본 포스터가 바벨을 사용하고 있다는 것을 나타내는 질문이 없습니다.
— ivarni
그는 바벨 미리 설정 한 웹팩 구성이 바벨 사전 놓칠 수 use.May 수 반응에 대해 그는 단지, Reactjs로 시작했다
— 여와
원본 포스터가 웹팩을 사용하고 있음을 나타내는 질문이 없습니다. 둘 다 편리하지만 React로 작업하는 데 필요하지 않습니다.
— ivarni
4
@Nuwa 감사합니다. npm install babel-preset-react내 문제를 해결했습니다.
— Yasin Yörük
4
.babelrc프로젝트에 파일이 있으면 "presets": ["env", "react", "es2015"]그게 다야 !!
— Byron Lopez
21

제 경우에는 스크립트 태그에 type 속성을 포함하지 못했습니다.

<script type="text/jsx">
— 션 M
소스
7

JSX 코드를 자바 스크립트로 트랜스 파일 / 컴파일하거나 브라우저 내 변환기를 사용해야합니다.

봐 http://facebook.github.io/react/docs/getting-started.html 과의 양지 <script>태그를, 당신은 JSX의 브라우저에서 작업에 포함 된 사람들이 필요합니다.

— krs
소스
예, 아래는 업데이트 된 jsbin 링크입니다
— sam
jsbin은 JS를 실행하는 자체 방법을 가지고있는 것으로 보이며 오류는 코드 내에서 발생합니다.
— krs
그러나 그것은 같은 오류이고 같은 줄 번호입니다. 또한 링크에
— sam
jsfiddle.net/9st5Q 는 React가 잘 작동하는 jsfiddle의 코드입니다.
— krs
7
확인 당신은 설정 유형 = "텍스트 / jsx" 에서 <script type="text/jsx">태그는 붙여 넣기 hastebin.org에 전체 코드를 붙여 주시기 바랍니다하려는 경우
— KRS
7

이 오류가 발생하여 이틀 동안 해결할 수 없었기 때문에 오류 수정이 매우 간단합니다. 몸에 연결 script하고 추가 type="text/jsx"하면 문제가 해결됩니다.

— Руслан
소스
답변에 대한 설명도 할 수 있습니까?
— MMascarin
1
type = "text / jsx"를 줄 때 이것이 어떤 유형의 문서 또는 파일인지 알기 위해 컴파일러를 착용했다고 생각합니다.
— Руслан
3

다음은 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>

단일 파일에서이 코드를 실행하면 작동합니다.

— Myusuf
소스
2

당신이 저와 같고 어리석은 실수를하는 경향이 있다면, 당신의 바벨 프리셋이 포함되어 있다면 package.json을 확인하세요 :

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
— 핑크 와플
소스
1

실제 사이트 구성을 고려한다면 머리에서 ReactJS를 실행해야하는 것보다

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

js 파일에 속성 추가-type = "text / babel"like

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

그러면 아래 코드 예제가 작동합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
— 로마 인
소스
1

다음 코드를 사용하십시오. React 및 React DOM에 대한 참조를 추가했습니다. ES6 / Babel을 사용하여 JS 코드를 바닐라 JavaScript로 변환하십시오. Render 메서드는 ReactDOM에서 제공되며 render 메서드에 DOM에 지정된 대상이 있는지 확인합니다. 때로는 render () 메서드가 대상 요소를 찾을 수없는 문제에 직면 할 수 있습니다. 이는 DOM이 렌더링되기 전에 반응 코드가 실행되기 때문에 발생합니다. 이에 대응하려면 jQuery ready ()를 사용하여 React의 render () 메서드를 호출합니다. 이렇게하면 DOM이 먼저 렌더링되는지 확인할 수 있습니다. 앱 스크립트에서 defer 속성을 사용할 수도 있습니다.

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>

JS 코드 :

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

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

이것이 문제를 해결하기를 바랍니다. :-)

— 압하이 시로
소스
1

.babelrc가 하위 폴더가 아닌 애플리케이션 루트 폴더에 있는지 확인하십시오. 이 경우 파일을 루트로 이동하십시오.

— 앤드류 오케 소쿤
소스
0

다음과 같은 코드를 사용할 수 있습니다.

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

그리고 추가 잊지 마세요 <div id='main-content'></div>에 body있는 당신의html

그러나 package.json 파일에서 다음 종속성을 사용해야합니다.

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

그것은 나를 위해 작동하지만 다음 옵션 (webpack.config.js에)과 함께 webpack도 사용했습니다.

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
— 비탈리 안 드루 시신
소스
0

제 경우에는 babel사전 설정 외에도 다음 항목 에 추가해야했습니다 .eslintrc.

{
  "extends": "react-app",
  ...
}
— Dferrazm
소스
0

나는 React오늘 막 배우기 시작했고 같은 문제에 직면했습니다. 아래는 내가 작성한 코드입니다.

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

그리고를 사용한 후에 쉼표 (,)를 놓친 것을 알 수 있습니다 <Hello/>. 그리고 오류 자체는 우리가 봐야 할 라인을 말합니다.

여기에 이미지 설명 입력

따라서 ReactDOM.render()함수 의 두 번째 매개 변수 앞에 쉼표를 추가하면 모두 제대로 작동하기 시작했습니다.

— Sibeesh Venu
소스
0

다른 방법으로 할 수있는 HTML 

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

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

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

</html>

src / index.js 경로가있는 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"));

이 package.json을 사용하면 빠르게 작동하고 실행됩니다.

{
  "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
소스
0

하지만 .babelrc 구성 파일에 적절한 바벨 로더가 모두 있습니다. parcel-bundler 가 포함 된 이 빌드 스크립트는 수동 페이지 새로 고침시 브라우저 콘솔에서 예기치 않은 토큰 오류 <및 MIME 유형 오류를 생성했습니다.

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

빌드 스크립트를 업데이트하면 문제가 해결되었습니다.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
— Abhijeet
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.