Yesterday that I was working on my open source Sass template starter with Nuxt Layers,
I encounter a problem, when I was trying to use one of my layers in another layer, let me explain a little bit my project set up so you can have a better overview of the problem:
My folder structure is the following:
-- nux-sass-layer
-- packages
-- ui
-- content
-- auth
-- email
-- dashboard
--site
When I implemented my UI
layer, there was no error at all, and everything compiled like always.
I was importing some types
from radix-vue
and everything seems fine, until!!
I try to import a component from the
ui
Layer for the time was fine, because that first component wasnβt using anyexternal types
So the problem start when I imported my HeaderNavigation
but that component depends on other components that use external types, like TheMenuItem
component.
I start getting 500
errors and the following message in the terminal:
Importing directly from module entry-points is not allowed
And Pre-transform error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue"
.
The component that was doing the import of the type
<script setup lang="ts">
import { NavigationMenuRoot } from "radix-vue";
import NavigationMenuViewport from "./NavigationMenuViewport.vue";
import { cn } from "@UI/lib/utils";
import type { NavigationMenuRootProps, NavigationMenuRootEmits } from "radix-vue"; //<- This was the line that was breaking everithing
const props = defineProps<NavigationMenuRootProps & { class?: string }>();
const emits = defineEmits<NavigationMenuRootEmits>();
</script>
I spend more than a couple of hours trying to find a solution and looking if anyone has encountered the same issue.
But not luck, I got some feedback from the Discord community of Nuxt
.
But after a walk with the dog and some coffee, I look deeper at the error details and where the error was coming from, then did a deep dive in the .nuxt
folder and look at the output and notice that the tsconfig.json
that was created was target to moduleResolution:module
and not to "Nodeβ, update my tsconfig.josn
to make the moduleResolution
to Node
.
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"paths": { "@UI/*": ["./*"] },
"moduleResolution": "Node"
}
}
This solves the problem π€
Here is the link to the project if you want to take a look at it or need an example on how to or not to use Nuxt layers for your project.
Please if anyone have a better way please comment below and let's learn together
Working on the audio version
Top comments (1)
In my case, installing typescript as dependecies solve the problem