Nuxt.jsで「Adjacent JSX elements must be wrapped in an enclosing tag.」が出る場合の対処法

0,目次

  1. はじめに
  2. 原因
  3. 対処
  4. 参考文献

1,はじめに

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

このエラーの原因と対処法について、情報共有させていただきます。

2,原因

参考にさせていただいた記事にも記載のある通り、

このエラーは、starter-templateの設定ファイルの記載ミスが原因で生じています。

この件に関して、Nuxt.jsの初心者用のテンプレートのGitHubにプルリクエストも作成されています。

Fix eslint error by fb64 · Pull Request #83 · nuxt-community/starter-template · GitHub

このプルリクエストがマージされれば、私のように悪戦苦闘する人はいなくなると思います。

とはいえ、現状反映されていないようです。

3,対処

参考にさせていただいた記事にもある通り、

プルリクエストの内容をNuxt.jsの設定ファイルに対してパッチします。

「nuxt.config.js」について、27, 28行目を以下の通り変更します。

(1)変更前

extend (config, { isDev, isClient }) {
    if (isDev && isClient) {

(2)変更後

extend (config, { isDev }) {
    if (isDev && process.isClient) {

4,参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA