[react-output-target] bug: generated components.ts using absolute paths in an Nx monorepo

[dgonzalezr]

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

4.20.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.6.0

Current Behavior

After the latest changes on this PR, it seems that the @stencil/react-output-target package generates the components.ts file using absolute paths when the project structure is a monorepo environment with NX.

[!IMPORTANT] Please, note that this issue does not occur with the previous version of @stencil/react-output-target v0.5.3.

Expected Behavior

The @stencil/react-output-target package is designed to generate the components.ts file with the correct paths.

Steps to Reproduce

Follow the steps described in the Issue 2 of the reproduction code below

Code Reproduction URL

https://github.com/dgonzalezr/nx-stencil

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

[dgonzalezr]

Ok, this might be a false issue and mostly a misconfiguration. We used to resolve the path (because of some Windows issues in the past) but after removing that and using the relative path it seems to work as expected 🙂

I will continue with some more testing and update or close this issue as needed.

[dgonzalezr]

After another round of tests, it has become apparent that a customElementsDir is likely needed. Our project setup uses certain plugins that require resolving absolute paths; not resolving these paths results in a compilation error. I believe the same situation happened also before v0.6.0, but there we had the option to set the customElementsDir, even if it's equal to its default value.

Is it possible to consider adding customElementsDir as an option in the target setup?

[christian-bromann]

Hey @dgonzalezr 👋 what is the customElementsDir suppose to allow users to change?

[dgonzalezr]

@christian-bromann the same as it does with v0.5.3: https://stenciljs.com/docs/react#customelementsdir

In v0.6.0 import declarations are built using:

• stencilPackageName
• customElementsDir
• tagName

In my case, because of my setup shown here, I need to resolve the path for generating components.ts using node resolve with __dirname. In v0.6.0, it would look like this:

  react({
    outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\/g, '/'),
  }),

The issue is that the resolved path, which is absolute, also gets added to the customElementsDir (refer to the screenshot previously mentioned). If I could set a fixed value for customElementsDir, it might help resolve my issue.

  react({
    outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\/g, '/'),
    customElementsDir: 'whatever'
  }),

This way, the import statement would adhere to that specified value and generate:

import { ... } from '<stencilPackageName>/whatever/<tagName>';

I hope this makes sense. If not, feel free to ask for more details.

[christian-bromann]

It seems like this is being tackled in #461

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.