◀ 14.

【Vue.jsエラー】Emitted value instead of an instance of Error

▶
編集
この記事の要点
  • (Emitted value instead of an instance of Error) はVue.js のコンポーネントテンプレートエラー
  • 原因: Vue 2 系の制約「<template> 直下に複数ルート要素」
  • 対処: ルート要素を 1 つだけにする（<div> 等でラップ）
  • Vue 3 ではマルチルート OK: Vue 3 へ移行すれば解消
  • Vue 2 でも functional component や JSX なら複数ルート可

 

エラーの状況

(Emitted value instead of an instance of Error)
  Error compiling template:

    

  - Component template should contain exactly one root element.
    If you are using v-if on multiple elements, use v-else-if to chain them instead.

Vue 2 系の制約: 1 つのコンポーネントテンプレートにはルート要素が 1 つだけでなければなりません。

原因と対処

原因 1: 複数のルート要素

原因 2: 条件分岐で複数ルート

原因 3: コメントが影響することも

原因 4: 改行 / テキストノードが混在

Vue 3 ではマルチルート可

Vue 3 から「Fragments」が導入され、複数ルート要素 OK になりました:

属性の継承注意

Vue 2 で複数ルートを扱う方法

① Functional Component

② JSX で複数ルート (Babel + jsx プラグイン)

export default {
    render() {
        return [
            
ヘッダー
,
            
本文
,
            
フッター

        ];
    }
};

③