[Vue warn]: Failed to resolve component and tsconfig erros

Question

Basically, I created a component called "SelecionarIngredients" and I am exporting it to the component "ConteudoPrincipal". However, the browser throws a Vue warn error saying it failed to resolve the component. I tried updating the configuration files like vite.config.ts and all tsconfig files, but then it could not find other components and created new erros in the tsconfig files. I tried npm updates, json updates and nothing worked. Any idea why the browser can't resolve this component and show it on the screen?

**Main component: **

<script lang="ts">
import { defineComponent } from "vue";
**import SelecionarIngredientes from "./SelecionarIngredientes.vue";**

export default defineComponent({
  data() {
    components: {
      SelecionarIngredientes;
    }
  },
});
</script>

<template>
  <main class="conteudo-principal">
    <SelecionarIngredientes />
  </main>
</template>

// **Component being exported and cannot found when running npm run dev **

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SelecionarIngredientes",
});
</script>

I tried updating the vite.config and tsconfig files but it did not work

**Vite.config file: **

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
});

**tsconfig file **

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.css"
  ]
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

Answer 1

The problem is not related to component modules. If a module fails to be resolved and imported, the build fails and there can be no Vue warnings.

The question lacks the specific warning but it's safe to assume that no SelecionarIngredientes component has been registered, so <SelecionarIngredientes /> fails to render.

It's mistakenly provided in component data, while it should be in components:

export default defineComponent({
    components: {
      SelecionarIngredientes
    }
});