Issue in React output with includeDefineCustomElements vs includeImportCustomElements

[crrobinson14]

Prerequisites

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

Stencil Version

4.18.3

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.5.3

Current Behavior

With no settings at all, I get errors importing components into client-side React projects that they can't be loaded (sorry, I lost the full error message but can go back and repro if it's helpful). If I add includeDefineCustomElements that problem goes away and most components work, but if those components use third-party libraries like date-fns those seem not to survive the build and importing them post-build will produce errors like TypeError: s.format is not a function.

This project is built and published to NPM for the base package with a reactOutputTarget configured per the instructions at https://stenciljs.com/docs/react for its base sub-project setup, with the following output settings:

    reactOutputTarget({
      componentCorePackage: '@verdocs/web-sdk',
      proxiesFile: '../verdocs-web-sdk-react/src/components.ts',
      // includeDefineCustomElements: true,
      includeImportCustomElements: true,
    }),

Flipping the include booleans as shown above resolves the above issue and as far as I can tell, everything then works as expected, BUT the React output components.ts has the wrong paths in it, two sample incorrect lines are:

import type { JSX } from '@verdocs/web-sdk/types';

import { defineCustomElement as defineVerdocsActivityBox } from '@verdocs/web-sdk/components/verdocs-activity-box.js';

but the correct paths have a dist subpath:

import type { JSX } from '@verdocs/web-sdk/dist/types';

import { defineCustomElement as defineVerdocsActivityBox } from '@verdocs/web-sdk/dist/components/verdocs-activity-box.js';

This prevents the react-sdk subproject from building properly. A simple sed/string-replace does fix the issue. But I can't puzzle out why it's going wrong. My main project is indeed configured with settings like "module": "dist/index.js", in package.json but those are required to publish that base package properly (the core Web Components produced by Stencil are in dist/.) So I believe on the origin side, the paths are correct. But I can't figure out what causes the components.ts file to be produced without this additional path element.

Expected Behavior

react-output-target produces a components.ts file with correct paths.

Steps to Reproduce

1. Create a new StencilJS project using v4.18.3 using the steps at https://stenciljs.com/docs/getting-started
2. Add a React output target and SDK subproject following the steps at https://stenciljs.com/docs/react
3. Build the main project, toggling settings between includeDefineCustomElements and includeImportCustomElements.
4. Observe that with includeImportCustomElements enabled, the components.ts file will have incorrect paths.

Code Reproduction URL

https://github.com/verdocs/web-sdk

Additional Information

This repo is Open Source, so for the repro I included a link to it directly above in case you want to look at the "real deal". If you want a cut-down version with just one component and no other distractions (e.g. angular output target) let me know and I'll make a cleaner version.

[ionitron-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