Vueのprovide/injectを利用したい。

前提

「これから始めるVue.js3実践入門」p158をローカル登録に変更したい。

実現したいこと

ローカル登録を利用する
コンポーネント間の値の受け渡し
provide/injectを利用してVue 3実践入門を表示したい。

発生している問題・エラーメッセージ

[Vue warn]: Failed to resolve component: my-my
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. (4)
"
"
" at <MyParent>"
"
"
" at <App>"

該当のソースコード

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
  <my-parent />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script>
<script src="provide.js"></script>
</body>
</html>

javascript

const MyParent={
  provide:{
    title:'Vue 3実践入門'
  },

  template: `<div id="parent">
              <my-my />
            </div>`
};

const MyMy={
  components:{
    'my-parent':MyParent
  },
  template:`<div id="my">
              <my-child />
            </div>`
};

const MyChild={
  components:{
    'my-parent':MyParent,
    'my-my':MyMy
  },
  inject:['title'],
  template:`<div id="child">
              {{title}}
            </div>`
};


Vue.createApp({
  components:{
    'my-parent':MyParent,
    'my-my':MyMy,
    'my-child':MyChild
  }

  })
  .mount('#app');

試したこと

javascriptを本のものに変更したら正しく実行されたので、javascriptが間違っていると思います。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

ローカルコンポーネントの順番を入れ替えることで解決しました。

javascript
1const MyChild={
2  inject:['title'],
3  template:`<div id="child">
4              {{title}}
5            </div>`
6};
7
8
9
10const MyMy={
11  components:{
12    'my-child':MyChild
13  },
14  template:`<div id="my">
15              <my-child />
16            </div>`
17};
18
19const MyParent={
20
21  components:{
22    'my-my':MyMy
23  },
24  provide:{
25    title:'Vue 3実践入門'
26  },
27
28  template: `<div id="parent">
29              <my-my />
30            </div>`
31};
32
33
34Vue.createApp({
35  components:{
36    'my-parent':MyParent,
37    'my-my':MyMy,
38    'my-child':MyChild
39  }
40
41  })
42  .mount('#app');
43