source

불명확한 에러가 내 컴포넌트 이름이 0으로 시작된다고 한다.

gigabyte 2022. 8. 27. 10:04
반응형

불명확한 에러가 내 컴포넌트 이름이 0으로 시작된다고 한다.

컴포넌트명이 제로라는 불명확한 에러가 표시된다.하지만 내 컴포넌트 중 이름에 0이 있는 것은 없습니다.이 오류는 추적하기가 어렵습니다.제가 올바른 방향으로 나아갈 수 있도록 문제가 무엇인지 누구나 알고 있습니다.

vendor.js: 66537 [Vue warn] :잘못된 구성 요소 이름: "0"입니다. 구성 요소 이름에는 영숫자와 하이픈만 포함될 수 있으며 문자로 시작해야 합니다.

오류에 대한 자세한 내용은 다음과 같습니다.

여기에 이미지 설명 입력

편집: 상세 정보:

저는 독특한 프로젝트 구조를 가지고 있습니다.파일 컴포넌트는 1개입니다.각 컴포넌트는 다음과 같이2개의 파일로 분할됩니다.

Home.vue:

<template>
    ...
</template>

<style lang="scss">
    ...
</style>

<script src="./home.js"></script>

home.module:

export default {
    ...
}

편집: 디버깅캡처

여기에 이미지 설명 입력

편집: home.js

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

같은 에러가 발생했는데 컴포넌트에 오브젝트가 아닌 어레이를 사용한 것이 원인입니다.이렇게 보여야 합니다.

components: {
  RecentPostsWidget,
  PagesWidget
}

에러가 발생했을 때는, 다음과 같이 되어 있었습니다.

components: [
  RecentPostsWidget,
  PagesWidget
]

교환을 시도하다

components: {
    RecentPostsWidget,
    PagesWidget
}

와 함께

components: {
    recentPostsWidget: RecentPostsWidget,
    pagesWidget: PagesWidget
}

컴포넌트에 이름을 추가해 볼 수 있습니까?

home.displaces.displaces

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    name: 'p-components-home',
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

난 멍청해서 내 컴포넌트에 이름을 붙였어

export default {
  components: 'footer',
}

대신:

export default {
  name: 'Footer',
}

중괄호를 사용하는 구성 요소를 찾고 {}(으)로 변경합니다. 예:

components: [
     Logo,
     Nav
   ],

전환 대상:

components: {
     Logo,
     Nav
   },

를 추가해야 합니다..vue컴포넌트 Import 종료 시

import RecentPostsWidget from './widgets/RecentPosts.vue'
import PagesWidget from './widgets/Pages.vue'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

언급URL : https://stackoverflow.com/questions/49792383/obscure-error-says-my-component-name-begins-with-a-zero

반응형