ReactJS :“Uncaught SyntaxError : Unexpected token <”

110

ReactJS에서 사이트 구축을 시작하려고합니다. 그러나 JS를 별도의 파일에 넣으려고 할 때 "Uncaught SyntaxError : Unexpected token <"오류가 발생하기 시작했습니다.

/** @jsx React.DOM */JS 파일 맨 위에 추가하려고했지만 아무것도 고치지 않았습니다. 다음은 HTML 및 JS 파일입니다. 무엇이 잘못되었는지에 대한 아이디어가 있습니까?

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

편집 : type="text/jsx"착륙선 코드를 포함하는 스크립트 태그 에 추가해야한다는 것을 깨달았습니다 . 그러나 이것을 추가하고 다시로드하면이 경고가 표시됩니다.

"당신은에서 브라우저 JSX 변압기를 사용하는 제품에 대한 귀하의 JSX를 미리 컴파일해야합니다 -. http://facebook.github.io/react/docs/tooling-integration.html#jsx "

이 오류가 뒤 따릅니다.

"XMLHttpRequest는 file : ///Users/.../lander.js를로드 할 수 없습니다. 교차 출처 요청은 http, data, chrome-extension, https, chrome-extension-resource와 같은 프로토콜 스키마에 대해서만 지원됩니다."

브라우저 jsx 변환이 작동하도록하려면 다른 작업이 필요한 것 같지만 그것이 무엇인지 잘 모르겠습니다.

편집 : OOOOH MAMP 등을 사용하여 호스팅해야합니까?

— 캣
소스

"JS"파일을 어떻게 포함하고 있습니까?

— Quentin

1

다음 스크립트 코드를 추가로 추가해야합니다. <script src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— Steven

2019 업데이트 : type="text/babel"JS 파일을 가져 오는 스크립트 태그와 위의 주석에서 @Steven이 언급 한 Babel 스크립트를 추가하면 효과가 있습니다.

— Syknapse

128

업데이트-대신 사용 :

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

다음 type="text/jsx"과 같이 scriptJSX Transformer에 의해 변환되어야하는 JavaScript 파일을 포함하는 데 사용되는 태그 의 속성으로 추가하십시오 .

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

그런 다음 MAMP 또는 다른 서비스를 사용하여 여기에 설명 된대로 모든 포함이 작동하도록 localhost에서 페이지를 호스팅 할 수 있습니다 .

모든 도움에 감사드립니다!

— 캣
소스

3

python -m SimpleHTTPServer 8080Apache와 같은 영구 서버를 설치, 실행 및 구성 할 필요가 없기 때문에 일반적으로 사용됩니다.

— Brigand

3

완벽하게, 난 그냥 추가 작업 text/jsx속성 값을

— 윌리엄

27

JSTransform은 더 이상 사용되지 않습니다 . 대신 babel을 사용하세요.

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

— Pumych
소스

21

다음 type="text/babel"과 같이 스크립트 태그의 속성으로 추가 합니다.

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

— NAVIN SINGH BISHT
소스

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

즉각적인 솔루션.)

— Zoltán

3

가지고있는 코드가 정확합니다. JSX 코드는 JS로 컴파일해야합니다.

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

— 스튜어트 715
소스

시도해 보았습니다. 이제 "Uncaught SyntaxError : Unexpected token ILLEGAL"이 나타납니다

— kat

크롬을 사용하고 있습니까? 줄 번호를 제공하고 특정 코드를 가리 킵니까?

— stewart715

내 나쁜, 그들을 이스케이프하지 않고 줄 바꿈을 할 수 없으므로 +... updated 와 연결 해야합니다. 지금 작동해야합니다.

— stewart715

이제 "Uncaught Error : Invariant Violation : ReactCompositeComponent.render () : 유효한 ReactComponent가 반환되어야합니다. 정의되지 않은 배열 또는 다른 잘못된 개체를 반환했을 수 있습니다." 문자열이 아닌 유효한 구성 요소 반응처럼 보인다

— 캣

아 여기서 무슨 일이 벌어지고 있는지 알고 있습니다 ... jsx 반응 코드를 자바 스크립트로 컴파일해야합니다 ... 그 작업을 수행하거나 브라우저에서 직접 실행합니까?

— stewart715

3

다음과 같은 오류가 발생하는 경우 :

SyntaxError : embed : Unexpected token (107 : 9) 105

중괄호가 누락되었을 수 있습니다.

— 다스 베이더 경
소스

1

webpack을 추가하면 내 프로젝트에서 비슷한 문제가 해결되었습니다. 특히 "사전 설정"부분.

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

— 프라 바토 자
소스

0

나는 당신과 같은 문제가 있으며 내 서버에서 무언가를 변경했습니다.

당신은 이것을 시도 할 수 있습니다

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

— 디 지
소스

원래 질문은 express.js를 사용하지 않았습니다. 이 문제가 어떻게 해결되는지 설명해 주시겠습니까?

— Jonathan Rosa