質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20401questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    1114questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • ESLint

    42questions

    ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

BabelとESLintでJSXがエラーになる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 51

makkuro

score 14

追記しましたが、ESLintの問題ではないようです。

Babelのコンパイルも失敗してしまいます。


ESLintをReactに適用すると、以下のようにJSXがエラーになってしまいます。

ReactDOM.render(
  <h1>Hello React</h1>, // < Parsing error: Unexpected token /eslint
  document.getElementById('root')
);


調べたらすぐに原因はわかって、ESLintがデフォルトでJSX記法に対応していないので設定を追加する必要があるとのことでした。

参考にしたサイト

しかし、設定を記述した後も相変わらずエラーが出るので困っています。

使っている.eslintrc.jsonpackage.jsonを載せておきます。

環境
node v8.15.0
VSCode+拡張(ESLint)


.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "standard",
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console": "warn",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "react/no-set-state": "error"
    }
}


package.json

{
...
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-standard": "^4.0.0",
    "express": "^4.17.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "typescript": "^3.4.5",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
...
  }
}

eslintとそのモジュールはグローバルにはインストールしておらず、ローカルにインストールしています。npx eslint --debug srcで実行したところ、プラグインの読み込み等は正常に行われているようです。

長いですが、一応コマンドの出力も全文載せておきます。

$ npx eslint --debug src
  eslint:cli CLI args: [ '--debug', 'src' ] +0ms
  eslint:cli Running on files +4ms
  eslint:glob-utils Creating list of files to process. +0ms
  eslint:ignored-paths baseDir = "/Users/admin/dir" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/node_modules/*"
  eslint:ignored-paths   cooked   = "/node_modules/*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/bower_components/*"
  eslint:ignored-paths   cooked   = "/bower_components/*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = ".*"
  eslint:ignored-paths   cooked   = ".*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "!../"
  eslint:ignored-paths   cooked   = "!../" +0ms
  eslint:ignored-paths Looking for ignore file in /Users/admin/dir +0ms
  eslint:ignored-paths Could not find ignore file in cwd +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/node_modules/*"
  eslint:ignored-paths   cooked   = "/node_modules/*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/bower_components/*"
  eslint:ignored-paths   cooked   = "/bower_components/*" +0ms
No files matching 'src' were found.
admin-PC:dir admin$ npx eslint --debug ./src/index.jsx 
  eslint:cli CLI args: [ '--debug', './src/index.jsx' ] +0ms
  eslint:cli Running on files +4ms
  eslint:glob-utils Creating list of files to process. +0ms
  eslint:ignored-paths baseDir = "/Users/admin/dir" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/node_modules/*"
  eslint:ignored-paths   cooked   = "/node_modules/*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/bower_components/*"
  eslint:ignored-paths   cooked   = "/bower_components/*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = ".*"
  eslint:ignored-paths   cooked   = ".*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "!../"
  eslint:ignored-paths   cooked   = "!../" +0ms
  eslint:ignored-paths Looking for ignore file in /Users/admin/dir +0ms
  eslint:ignored-paths Could not find ignore file in cwd +0ms
  eslint:ignored-paths contains: +1ms
  eslint:ignored-paths   target = "/Users/admin/dir/src/index.jsx" +0ms
  eslint:ignored-paths   result = false +0ms
  eslint:ignored-paths contains: +0ms
  eslint:ignored-paths   target = "/Users/admin/dir/src/index.jsx" +0ms
  eslint:ignored-paths   result = false +0ms
  eslint:cli-engine Processing /Users/admin/dir/src/index.jsx +0ms
  eslint:cli-engine Linting /Users/admin/dir/src/index.jsx +0ms
  eslint:config Constructing config file hierarchy for /Users/admin/dir/src +0ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading /Users/admin/dir/.eslintrc.json +1ms
  eslint:config-file Loading JSON config file: /Users/admin/dir/.eslintrc.json +0ms
  eslint:plugins Loaded plugin react (eslint-plugin-react@7.13.0) (from /Users/admin/dir/node_modules/eslint-plugin-react/index.js) +0ms
  eslint:config-file Loading plugin:react/recommended +112ms
  eslint:config-file Attempting to resolve eslint-plugin-react +1ms
  eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint-plugin-react/index.js +0ms
  eslint:config-file Loading /Users/admin/dir/node_modules/eslint/conf/eslint-recommended.js +15ms
  eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint/conf/eslint-recommended.js +0ms
  eslint:config-file Loading standard +16ms
  eslint:config-file Attempting to resolve eslint-config-standard +0ms
  eslint:config-file Loading JS config file: /Users/admin/dir/node_modules/eslint-config-standard/index.js +1ms
  eslint:plugins Loaded plugin import (eslint-plugin-import@2.17.2) (from /Users/admin/dir/node_modules/eslint-plugin-import/lib/index.js) +152ms
  eslint:plugins Loaded plugin node (eslint-plugin-node@9.0.1) (from /Users/admin/dir/node_modules/eslint-plugin-node/lib/index.js) +65ms
  eslint:plugins Loaded plugin promise (eslint-plugin-promise@4.1.1) (from /Users/admin/dir/node_modules/eslint-plugin-promise/index.js) +6ms
  eslint:plugins Loaded plugin standard (eslint-plugin-standard@4.0.0) (from /Users/admin/dir/node_modules/eslint-plugin-standard/index.js) +2ms
  eslint:config Using /Users/admin/dir/.eslintrc.json +434ms
  eslint:config-ops Using config from partial cache +0ms
  eslint:config-ops Apply environment settings to config +1ms
  eslint:config-ops Creating config for environment es6 +0ms
  eslint:config-ops Creating config for environment node +0ms
  eslint:config-ops Creating config for environment browser +0ms
  eslint:linter Linting code for /Users/admin/dir/src/index.jsx (pass 1) +0ms
  eslint:linter Generating fixed text for /Users/admin/dir/src/index.jsx (pass 1) +10ms
  eslint:source-code-fixer Applying fixes +0ms
  eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +0ms
  eslint:cli-engine Linting complete in: 455ms +450ms

/Users/admin/dir/src/index.jsx
  5:19  error  Parsing error: Unexpected token /

✖ 1 problem (1 error, 0 warnings)

頑張って調べたのですが、理由が全くわからないので、どなたか教えていただきたいです。
よろしくお願いします。

追記

この質問はReact開発環境構築2018初めてのReact項目を進める上で、ESLintがエラーになって質問させていただいたのですが、ESLintのエラーは後回しにしてBabelで指示通りにコンパイルしてもJSX記法で以下の様にエラーが出ます。

$ npm run dev

> dir@1.0.0 dev /Users/admin/dir
> babel-node server/server.js

app listening on 3000
✖ 「wdm」: Hash: 28f93ada8d77d7952359
Version: webpack 4.31.0
Time: 310ms
Built at: 2019-05-18 08:19:04
    Asset      Size  Chunks             Chunk Names
bundle.js  6.09 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi ./src 28 bytes {main} [built]
[./src/index.jsx] 1.93 KiB {main} [built] [failed] [1 error]

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/admin/dir/src/index.jsx: Unexpected token (5:2)

  3 | 
  4 | ReactDOM.render(
> 5 |   <h1>Hello React</h1>,
    |   ^
  6 |   document.getElementById('root')
  7 | );
    at Parser.raise (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:6322:17)
    at Parser.unexpected (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:7638:16)
    at Parser.parseExprAtom (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8799:20)
    at Parser.parseExprSubscripts (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8385:23)
    at Parser.parseMaybeUnary (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8365:21)
    at Parser.parseExprOps (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8252:23)
    at Parser.parseMaybeConditional (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8225:23)
    at Parser.parseMaybeAssign (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8172:21)
    at Parser.parseExprListItem (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:9449:18)
    at Parser.parseCallExpressionArguments (/Users/admin/dir/node_modules/@babel/parser/lib/index.js:8592:22)
 @ multi ./src main[0]
ℹ 「wdm」: Failed to compile.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

Babel7以前の情報とBabel7を切り分けて考える必要があったのと、コピペだけでは無くある程度の構文を理解するよう心がけて粘ったら、よくわからないけど解決しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20401questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    1114questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • ESLint

    42questions

    ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。