Nuxt.js+Vuetifyで「Internal server error: expects exactly one child element or component.」
今回はNuxt.js+Vuetify環境で下記のようなエラーが起きたときの原因と対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
ERROR Internal server error: <Transition> expects exactly one child element or component. 2:49:15 AM Plugin: vite:vue File: /usr/local/test-web/index.vue:7:13 5 | <v-row> 6 | <transition> 7 | <v-col | ^ 8 | key="box1" 9 | v-if="page === 1" at Object.createCompilerError (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1363:17) at createDOMCompilerError (/usr/local/test-web/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:121:23) at Array.<anonymous> (/usr/local/test-web/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:419:13) at traverseNode (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3572:15) at traverseChildren (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3523:5) at traverseNode (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3566:7) at traverseChildren (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3523:5) at traverseNode (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3566:7) at traverseNode (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3559:9) at traverseChildren (/usr/local/test-web/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3523:5) |
Nuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。
Nuxt.js+Vuetifyで「Internal server error: expects exactly one child element or component.」
まずこのエラーが起きた原因としては、エラーメッセージの通り、下記のようにtransitionタグの直下の子要素が複数あることが原因です。
|
1 2 3 4 5 6 7 8 |
<transition> <v-col> <!-- 要素 --> </v-col> <v-col> <!-- 要素 --> </v-col> </transition> |
これを解決するためには、transitionタグの直下の子要素をtemplateタグやdivタグでくくってあげて一つの要素にまとめればOKです。
|
1 2 3 4 5 6 7 8 9 10 |
<transition> <template> <v-col> <!-- 要素 --> </v-col> <v-col> <!-- 要素 --> </v-col> </template> </transition> |
みなさんもぜひお試しください。
終わりに
今回はNuxt.js+Vuetify環境で表題のようなエラーが起きたときの原因と対処法についてご紹介いたしました。