Problem with TypeScript module imports from pages within a multi-module Nuxt.js application (maybe ts alias problem 🤷‍♂️)

[EddyDezuraud]

Environment

• Operating System: Windows_NT
• Node Version: v18.18.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@9.8.1
• Builder: -
• User Config: css, app, ssr, runtimeConfig, modules, imports, vite, nitro
• Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/devtools@1.0.6, @nuxtjs/i18n@8.0.0-beta.13
• Build Modules: -

Reproduction

codesandbox.io/p/devbox/eloquent-chatelet-gdvcy3

---

Unfortunately, due to confidential elements of the project, providing a public repository is not possible.
However, I'll guide you on creating a simplified reproduction locally to demonstrate the import issue:

Project Structure:

Confirm that your project structure includes a module named "processus" with TypeScript files (e.g., store, components, etc.).

Module Setup:

On each module's root, the set of pages/components used for that module is defined using the example above.

TS Config:

After reviewing several issues more or less related to this topic, the following configuration was added to the tsconfig.json file.

Page index.vue

1. Navigate to the modules/processus/index.vue file.
2. Attempt to import the module with the statement import processus from '~/modules/processus/store/processus'; or import from "#imports" resource.
3. Observe the aforementioned errors in the IDE.

Describe the bug

I am currently facing issues with importing TypeScript modules from specific pages within a local module in an extended Nuxt.js application composed of multiple modules.

When attempting to import specific modules from pages located in the "processus" module, I receive the following errors in my IntelliJ IDE and also in VSCode:

Vue: Cannot find module ~/modules/processus/store/processus or its corresponding type declarations.
Vue: Cannot find module #imports or its corresponding type declarations.

Additional context

If I try to import with the same path and alias from a Vue file in the "components" folder of my process module, everything works perfectly.

I also want to add that the code runs completely without any issues, and the builds are functional as well. It's just that my IDE consistently highlights these imports in red.

Logs

No response

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[manniL]

Please provide a running reproduction (e.g. via StackBlitz or CodeSandbox). You can exclude any kind of business logic, structure + minimal code is enough 👍

[EddyDezuraud]

Reproduction link :

https://codesandbox.io/p/devbox/eloquent-chatelet-gdvcy3

In the /modules/test module, it is evident that the index.vue page contains import errors.

[daniluk4000]

@EddyDezuraud to fix please leave only "extends" in tsconfig. You basically overwrite Nuxt's properties and it's aliases as well.

I don't understand your original problem, but you can modify Nuxt's tsconfig by using according hook. You can also use alias/rootDir properties in Nuxt Config.

P.S. Don't think this is related but your project must be ES Modules. Please convert require to be import and verify "type": "module" in your package.json

[EddyDezuraud]

Thank you for your feedback.

I just tried removing the compilerOptions from the tsconfig. Indeed, the import of "#imports" is no longer completely red, but still shows an error. And for the other imports using the ~ alias, they are still not recognized.

My issue lies in the fact that, when adding a module, imports with aliases like "~" or #imports return a TypeScript error in my IDE from a page within that module.

[daniluk4000]

My issue lies in the fact that, when adding a module, imports with aliases like "~" or #imports return a TypeScript error in my IDE from a page within that module.

Can you try to Invalidate Caches from File menu? With clearing file system cache

Looks like a Webstorm issue to me here.

Also:

• Upgrade to newest Webstorm version
• If doesn't help, set Bundled version of TypeScript in Languages & Frameworks (for some reasons fixes some stuff for me in Webstorm)

[EddyDezuraud]

I just performed an invalid cache & restart, but unfortunately, I still have the issue. This problem is also present in VsCode, so I believe it's not an IDE-related issue but rather something within my project.

For additional information and clarification:
Everything works fine when I develop a page via the /pages/xxx.vue folder in Nuxt.

However, the problem arises when I create an internal module: modules/moduleX/pages/xxx.vue.
Strangely, I don't encounter the issue with the components in my module (modules/moduleX/components/xxx.vue).

[EddyDezuraud]

I just performed an invalid cache & restart, but unfortunately, I still have the issue. This problem is also present in VsCode, so I believe it's not an IDE-related issue but rather something within my project.

For additional information and clarification: Everything works fine when I develop a page via the /pages/xxx.vue folder in Nuxt.

However, the problem arises when I create an internal module: modules/moduleX/pages/xxx.vue. Strangely, I don't encounter the issue with the components in my module (modules/moduleX/components/xxx.vue).

Maybe I haven't declared the pages for my new internal module correctly?

import { defineNuxtModule } from "@nuxt/kit";
import path from "path";
const fullPath = path.resolve(__dirname);

export default defineNuxtModule({
  hooks: {
    "pages:extend": (pages) => {
      // Add ./pages/_processId dir to the routes
      pages.push({
        name: "test",
        path: "/test",
        file: path.resolve(fullPath, "pages/index.vue"),
      });
    },
  },
});

[daniluk4000]

Maybe I haven't declared the pages for my new internal module correctly?

Yeah I have opened your repro.

file: path.resolve(fullPath, "pages/index.vue"), -> file: path.resolve(fullPath, "test/pages/index.vue"),

That should do the trick. You can also move index.js inside module folder without changes.

[EddyDezuraud]

I did indeed fix the error on the sample repository.

However, it doesn't resolve the issue related to the TypeScript errors:
"Cannot find module '#imports' or its corresponding type declarations." and "Cannot find module '~/modules/test/services/test' or its corresponding type declarations."

[daniluk4000]

Do you see any fatal errors in console when starting the project?

And don't forget to remove compilerOptions in sample repo

[daniluk4000]

Stackblits for some reason ignored .nuxt for me, so the types didn't work. Did you try it on your real project?

[EddyDezuraud]

I've made all the mentioned modifications to my actual project. However, it doesn't seem to have made any difference.

Everything is working fine; there are no errors in the console, and the project launches and runs correctly.
It's just that I'm seeing TypeScript errors in my IDE.

[daniluk4000]

I've made all the mentioned modifications to my actual project. However, it doesn't seem to have made any difference.

Everything is working fine; there are no errors in the console, and the project launches and runs correctly. It's just that I'm seeing TypeScript errors in my IDE.

Really weird.

Can you try to enable TS checking? Will it tell something interesting?

Install vue-tsc as dev dependency and set typescript: { typeCheck: true } in Nuxt Config

[EddyDezuraud]

I just activated it, but none of the reported errors are related to that.

[EddyDezuraud]

For example, I just created a Git repository with a code sample similar to my implementation :
https://github.com/EddyDezuraud/nuxt-large-boilerplate/tree/master

[manniL]

Related? #25134

[daniluk4000]

For example, I just created a Git repository with a code sample similar to my implementation : https://github.com/EddyDezuraud/nuxt-large-boilerplate/tree/master

I'll play with it when I have a moment. Really interesting