Essentially, I have developed a component named "SelecionarIngredients" and I am trying to export it to the "ConteudoPrincipal" component. However, I encountered a Vue warn error in the browser stating that it failed to resolve the component. I attempted to make adjustments to configuration files like vite.config.ts and all tsconfig files, but this led to issues with finding other components and caused new errors in the tsconfig files. Despite trying npm updates, json updates, and various solutions, nothing seems to be resolving the issue. Any insights as to why the browser is struggling to locate and display this particular component?
**Primary 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"]
}
}