React JS: "Uncatched Syntax Error:예기치 않은 토큰 <"
React JS에서 사이트 구축을 시작하려고 합니다.그러나 JS를 다른 파일에 넣으려고 하면 "Uncatched SyntaxError:예기치 않은 토큰 <.
추가해 보았다/** @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는 파일:///Users/.../lander.js를 로드할 수 없습니다.크로스 오리진 요청은 프로토콜 체계(http, data, chrome-extension, https, chrome-extension-resource)에서만 지원됩니다."
브라우저 jsx 트랜스폼을 작동시키기 위해 해야 할 일이 있는 것 같습니다만, 그것이 무엇인지 잘 모르겠습니다.
편집: OOOOH MAMP 등을 사용하여 호스팅해야 합니까?
UPDATE - 대신 다음을 사용합니다.
<script type="text/babel" src="./lander.js"></script>
더하다type="text/jsx"의 속성으로서script다음과 같이 JSX 트랜스포머에 의해 변환되어야 하는 JavaScript 파일을 포함하는 데 사용되는 태그입니다.
<script type="text/jsx" src="./lander.js"></script>
그런 다음 MAMP 또는 기타 서비스를 사용하여 로컬호스트에서 페이지를 호스트하고 여기서 설명한 대로 모든 포함 항목이 작동하도록 할 수 있습니다.
여러분, 도와주셔서 감사합니다!
JSTransform은 더 이상 사용되지 않습니다. 대신 babel을 사용하십시오.
<script type="text/babel" src="./lander.js"></script>
더하다type="text/babel"스크립트 태그의 Atribute로서 다음과 같이 지정합니다.
<script type="text/babel" src="./lander.js"></script>
더하다type="text/babel".syslogx 파일을 포함하는 스크립트에 다음을 추가합니다.<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
이런 게 있다면
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>
)
}
});
다음과 같은 오류가 발생할 경우:
SyntaxError: 내장:예기치 않은 토큰(107:9) 105
곱슬 괄호가 없을 수 있습니다.
가지고 계신 코드가 맞습니다.JSX 코드를 JS로 컴파일해야 합니다.
http://facebook.github.io/react/jsx-compiler.html
저 같은 경우에는src="./<file>.js"효과가 없었습니다.사용.%PUBLIC_URL%성공했어.
<script defer async src="%PUBLIC_URL%/some-file.js"></script>
웹 팩에 추가해 보세요. 제 프로젝트에서도 비슷한 문제가 해결되었습니다.특히 "선물" 부분이요
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel',
query :{
presets:['react','es2015']
}
},
경우에는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★src="./<file>.js"효과가 없었습니다.'% PUBLIC_' "%URL%"
당신과 같은 문제가 있어서 서버에 변경을 가하고 있습니다.
이거 드셔보세요
const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
res.sendFile("index.html", { root });
});
Dee Jee 솔루션과 더불어 그의 솔루션을 시도해보니 My Error가 사라지지 않았습니다.
브라우저가 파일을 제대로 캐시하지 못한 것을 알게 되었습니다.
- 내 브라우저는 캐시된 파일의 미리보기를 로드할 수 없었고 express에서 상태 코드는 301이었습니다.
- 브라우저 개발 도구의 네트워크 탭에서 이러한 파일이 디스크 캐시에서 서버임을 알 수 있습니다.
솔루션
캐시된 파일을 삭제합니다.1시간 이내에 브라우저 이력을 클리어하여 캐시된 모든 파일을 삭제합니다.
언급URL : https://stackoverflow.com/questions/28100644/reactjs-uncaught-syntaxerror-unexpected-token
'programing' 카테고리의 다른 글
| Java에서 JsonObject의 null 값을 비교하는 방법 (0) | 2023.03.31 |
|---|---|
| mongoose 스키마에 created_at 및 updated_at 필드 추가 (0) | 2023.03.31 |
| mongodb로 날짜별로 분류하다 (0) | 2023.03.31 |
| "ErrorUtils caughed error" - Wordpress Facebook 플러그인에서 Chrome 콘솔 오류 발생 (0) | 2023.03.31 |
| MongoDB Compass 툴에서 업데이트($set) 쿼리를 실행하는 방법 (0) | 2023.03.31 |