bug: Stencil compile not transform absolute import to relative import hence causing cannot find module in other packages

[zh3ngyuan]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

"@stencil/core": "^2.8.1"

Current Behavior

When I use angular output in my angular app and run ng build, I got the following error

Error: ../../vega-stencil/dist/types/components.d.ts:11:51 - error TS2307: Cannot find module 'src/helpers/validator/rules/validationRule' or its corresponding type declarations.

11 import { ValidationRule } from "src/helpers/validator/rules/validationRule";
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Expected Behavior

the component.d.ts along with other compiled output file shouldn't generate any absolute import like what I used in my stencil source

and the error above shouldn't be happened

Steps to Reproduce

Create a class file for defining a type in src/helpers/validator/rules/validationRule

export interface ValidationRule<T> {
    canEvaluate(input: unknown): boolean;
    evaluate(input: T): EvaluateResult;
}

Import it into one of the stencil components you wrote for example

import { ValidationRule } from 'src/helpers/validator/rules/validationRule';

@Component({
    tag: 'stencil-input',
})
export class VegaInput {
    ...
    /** set the custom validation rules */
    @Prop() validationRules: ValidationRule<unknown>[] = [];

    @Element() el: HTMLStencilInputElement;

and run stencil build then check the generated src/component.d.ts

you can see in component.d.ts, it is still using absolute import which will causing issue

import { ValidationRule } from "src/helpers/validator/rules/validationRule";
export namespace Components {
...

Code Reproduction URL

the repository is private used within my team, hence im not able to provide the url, but I think the issue is pretty straightforward without reproduction code url

Additional Information

No response

[rwaskiewicz]

Hey @ALexander4295502,

Would you be able to provide us a URL to a new project that replicates the issue? I understand the repository is private to your team and cannot share that code - however, being able to start a minimal reproduction provided is extremely helpful for the team. It helps ensure that we don't miss anything when recreating an issue and helps make sure that the team and the issue reporter are on the same page. I'd greatly appreciate it!

[zh3ngyuan]

Hi @rwaskiewicz , sorry for the late response, I created the demo repo for reproducing https://github.com/ALexander4295502/stencil-demos

The ./dist is what I generated after running npm run build and as you can see in https://github.com/ALexander4295502/stencil-demos/blob/master/dist/types/components.d.ts:

import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { SomeInterface } from "src/types/type";
export namespace Components {
    interface MyDropdown {
        "someType": SomeInterface;
        "title": string;
        "toggle": boolean;
    }
    interface MyName {
    }
}

the SomeInterface is imported as non-relative path with root src (which is what I defined in tsconfig.js), and apparently, this won't be working since in the dist folder, there is no src exist

let me know if you have any other questions for my raised issue

[rwaskiewicz]

Thanks @ALexander4295502! I'm going to mark this as something that's not working how we'd expect it to. From here, the issue will get ingested into our internal backlog for the team to take a further look. Thanks again!

[christian-bromann]

Hi @zh3ngyuan 👋

We apologize for the delay in addressing this issue. The StencilJS team has been hard at work, and we appreciate your patience.

As StencilJS has undergone significant updates and improvements since this issue was originally posted, we believe that this specific concern may no longer be relevant with the latest version. Therefore, we are closing this issue.

If you are still experiencing this problem or have any new issues, please feel free to open a new issue with the latest details, and we will be happy to assist you.

Thank you for your understanding and support of StencilJS!