docs: Update react.md to include a fix for imports not being resolved.

[DanyaalMajid]

Add additional instructions to properly export the dist directory to fix build issues in the react-library later on.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stencil-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 7:59am

[christian-bromann]

@DanyaalMajid thanks for the contributions!

Could you describe a little bit more the problem this documentation tries to address?

[DanyaalMajid]

In the current versions of both stencil and the stencil/react-output-target packages, exporting react wrappers of components causes an issue whereby the import statement does not resolve, and the react-library fails to build due to unresolved modules.

This requires modifying the package.json for the stencil-library to include the proper export of the dist directory.

Also exporting each component manually is a redundant task, so i also added an export for all components generated in the components directory.

Ideally this change should be made in the stencil template repository which is used to create the stencil components project, feel free to include this there, meanwhile the updated docs should help.

The full error in the react-library when the dist folder is not exported properly:

lib/components/stencil-generated/components.ts:14:93 - error TS2307: Cannot find module 'stencil-library/dist/components/my-component.js' or its corresponding type declarations.

import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "stencil-library/dist/components/my-component.js";