Vue - Issues with importing components when I renamed them

Question

I'm using Vue 3 for my small website. I have issues when I renamed component.

When I want to rename component, this dialog window shows. After clicking on 'OK', Vetur will change root to component in HomeView.vue file (at line, where I am importing PostList.vue).

I have same names in components folder, where PostList.vue component is, and same name at line in HomeView.vue, where I am importing component PostList.vue.

PostList.vue component :

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id">
      <SinglePost :post="post" />
      </div>
  </div>
</template>

<script>
import SinglePost from "./SinglePost.vue"
export default {
  props: ["posts"],
  components: { SinglePost }
}
</script>

HomeView.vue file in views folder:

<template>
  <div class="home">
    <h1>Home</h1>
    <PostList :posts="posts" />
    <button>Toggle posts</button>
  </div>
</template>

<script>
import PostList from "../components/PostList.vue"
import { ref } from "vue"
export default {
  name: 'HomeView',
  components:{ PostList },
  setup(){
    const posts = ref([
      { title: "Hi  from the blog", body: "Lorem ipsum", id: 1},
      { title: "Hello from the blog", body: "Lorem ipsum", id: 2}
    ])
    return { posts }
  }
}
</script>

Router file (router.js):

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Here is error message:

 ERROR  Failed to compile with 1 error                                                                                                                                               16:32:49
 error  in ./src/views/HomeView.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve '../components/PostList.vue' in 'D:\VueLearning\composition-api\src\views'

ERROR in ./src/views/HomeView.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=js) 1:0-50
Module not found: Error: Can't resolve '../components/PostList.vue' in 'D:\VueLearning\composition-api\src\views'
 @ ./src/views/HomeView.vue?vue&type=script&lang=js 1:0-200 1:0-200 1:201-390 1:201-390
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 6:49-55
 @ ./src/router/index.js 2:0-45 6:13-21
 @ ./src/main.js 3:0-30 4:19-25

webpack compiled with 1 error

Do you know, how to fix it ? Thank you.

Answer 1

Maybe "Skip Changes" and do the name changes manually? It doesn't sound too complicated.