Q&A
以下のコードで次のようなエラー(Eslint-Googleで）がでます。
※エラー赤線表示箇所は、３行目の開始<div>です。
"Parsing error: unexpected token < (Fatal)"
javascript
1import React from 'react'; 2import ReactDOM from ' react-dom'; 3 4ReactDOM.render(<div>Hello React!!!</div>, document.querySelector('.container'));
今、Reactを勉強し始めました。 しかしながら上記のような警告が出て修正しようとしています。
index.htmlが以下です。
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>react</title> 6 <link rel="stylesheet" href="bundle.css"> 7 </head> 8 <body> 9 <div class="container"></div> 10 </body> 11 <script src="bundle.js" charset="urf-utf-8"></script> 12</html> 13
以下がeslintの設定ファイルです。
javascript
1module.exports = { 2 "extends": "google", 3 "parserOptions": { 4 "ecmaVersion": 6, 5 "sourceType": "module", 6 }, 7};
どうすればこの警告が消えるかを教えてください。
回答1件
0
ベストアンサー
<div>...</div>のようなJSXは標準的なJavaScriptではないので、標準設定のESLintでは正しく認識されません。
.eslintrcのparserOptions.ecmaFeatures.jsxをtrueに設定する- eslint-plugin-reactをインストールして、ESLintにプラグインとして設定する
- 好みに応じて、
eslint-plugin-reactのどれを適用するか設定する
文法を通すには1だけでいいのですが、2のプラグインを入れないままでは「JSXを使うために書いたimport React from 'react';が未使用扱いになる」「JSXの中でしか使っていない変数も未使用扱いになる」などの事態となるので、プラグインも入れないとほぼ実用できません。
投稿2018/08/07 12:05
編集2018/08/07 12:06
総合スコア145184
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。