Nuxt.jsで「Adjacent JSX elements must be wrapped in an enclosing tag.」が出る場合の対処法
０，目次
- はじめに
- 原因
- 対処
- 参考文献
１，はじめに
Nuxt.jsでアプリを皆さんは作りますでしょうか？
今回「npm run dev」を実行した際に、
以下のようなエラーが表示されました。
Module Error (from ./node_modules/eslint-loader/index.js): friendly-errors 21:59:31 /Users/jskny/Documents/Workspace/Project/byakko/components/AppLogo.vue 10:1 error Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...?
このエラーに対して、以下の記事を参考に、対処を行いました。
NuxtのESLintのエラー対応 - Qiita
このエラーの原因と対処法について、情報共有させていただきます。
２，原因
参考にさせていただいた記事にも記載のある通り、
このエラーは、starter-templateの設定ファイルの記載ミスが原因で生じています。
この件に関して、Nuxt.jsの初心者用のテンプレートのGitHubにプルリクエストも作成されています。
Fix eslint error by fb64 · Pull Request #83 · nuxt-community/starter-template · GitHub
このプルリクエストがマージされれば、私のように悪戦苦闘する人はいなくなると思います。
とはいえ、現状反映されていないようです。
３，対処
参考にさせていただいた記事にもある通り、
プルリクエストの内容をNuxt.jsの設定ファイルに対してパッチします。
「nuxt.config.js」について、27, 28行目を以下の通り変更します。
（１）変更前
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
（２）変更後
extend (config, { isDev }) {
if (isDev && process.isClient) {
４，参考文献
- NuxtのESLintのエラー対応 – Qiita
- Fix eslint error by fb64 · Pull Request #83 · nuxt-community/starter-template · GitHub
最近のコメント