Nuxt Layer issue `Importing directly from module entry-points is not allowed`

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 any external 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.

nuxt-monorepo-layers

Please if anyone have a better way please comment below and let's learn together

Working on the audio version

The Loop VueJs Podcast