bug: react-output-target not working anymore since upgrade 0.7.1

[Loic57]

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

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.7.1

Current Behavior

Hello,

Until a few days ago I had react-output-target v0.5.3 and everything worked great. Now I upgraded to 0.7.1 and followed the new documentation here : https://www.npmjs.com/package/@stencil/react-output-target

I noticed that when running npm run build in stencil, the "lib" folder in "react-library" is not the same anymore.

v0.5.3

v0.7.1

Here is my stencil.config.ts

export const config: Config = {
    namespace: 'webc-ds',
    hydratedFlag: {
        selector: 'class',
        name: 'hydrated'
    },
    outputTargets: [
        {
            type: 'www'
        },
        {
            type: 'dist',
            esmLoaderPath: '../loader',
            copy: [
                {src: '../public/assets', dest: 'assets', warn: true},
            ]
        },
        {
            type: 'dist-custom-elements',
            dir: 'components-build',
            customElementsExportBehavior: 'single-export-module',
            externalRuntime: false
        },
        reactOutputTarget({
            outDir: '../react-library/lib/components/stencil-generated/',
        })
    ]
};

Am I the only one to have this kind of issue ?

Expected Behavior

Be able to get my react wrapped components like in the previous versions.

Steps to Reproduce

I followed these steps: https://stenciljs.com/docs/react No error message during the process, It's just that I don't have my react component at the end.

Code Reproduction URL

I don't have a reproduction case, 95% of my config is in this ticket,

Additional Information

Thank you for your time

[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

[sean-perkins]

Hello @Loic57 can you please clarify what the issue is?

The latest version of the output target no longer generates or requires the react-component-lib in your component library. Instead you need to install the output target as a dependency of your react component library: https://stenciljs.com/docs/react#step-2---react-component-library

The component wrappers are generated in the components.ts file in your screenshot.

This repository (the example project) or Ionic Framework can be referenced as functional examples using the latest published versions of the react output target.

[Loic57]

Hello @sean-perkins

The issue is that I'm not able to have my stencil wrapped components working in react 18.3 since I upgraded react-output-target from 0.5.3 to 0.7.1.

I followed the documentation from stencil (your previous link) and this part is not working anymore :

import './App.css';
import { MyComponent } from 'react-library';

function App() {
  return (
    <div className="App">
      <MyComponent first="Your" last="Name" />
    </div>
  );
}

export default App;

import { MyComponent } from 'react-library'; exactly. react-library is not found anymore.

I will try to make a repository. I work in a big company and github is blocked, I can't clone, commit or push. I will have to wait to be on homeworking.

[sean-perkins]

Is the library/package not found or is the MyComponent entry point not found within that library/package?

The resolution of your package should not be impacted by changes to the output target. If you have updated the main entry point (typically an index.ts) to export the new component wrappers generated in the components.ts file, they should be made available to the consuming library or application.

Another area to check is to make sure your tsconfig.json is updated with the recommended settings for module resolution: https://github.com/ionic-team/stencil-ds-output-targets/tree/main/packages/react-output-target#your-react-application-or-library

[verena-ifx]

xport the new component wrappers generated in the components.ts file, they should be made available to the consuming library or app

I have the same issue!

[christian-bromann]

I will try to make a repository. I work in a big company and github is blocked, I can't clone, commit or push. I will have to wait to be on homeworking.

@Loic57 any updates on the reproduction case?

[yunker1]

I'm having a similar problem. I created a repository following the stencil react integration instructions and the repository does not build. The reproduction repository can be found here: https://github.com/yunker1/stencil-react-integration/tree/main I've seen this issue with another repository as well. Hopefully this helps.

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. Thank you!

[verena-ifx]

The issue has ben resolved for us now, because we switched to using react + vite. In our initial setup based on npx create-react-app, the latest stencil-output-target-react was not working as expected anymore since its upgrade.

[crudobaker]

I have same error using react with react-scripts: "5.0.1". I will try to move to Vite, but it is just a workaround.