Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

@EddyDezuraud

Description

@EddyDezuraud

Environment

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:

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

Module Setup:

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

TS Config:

image
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.

Capture d'écran 2024-01-09 115917
Group 3617
image

Additional context

Group 3618

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions