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

#1498) * Update react.md Add additional instructions to properly export the dist directory to fix build issues in the react-library later on. * docs(react): added docs about fixing component import issues
ionic-team · Jan 9, 2025 · aefd881 · aefd881
1 parent b448e4e
commit aefd881
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/docs/framework-integration/react.md b/docs/framework-integration/react.md
@@ -81,6 +81,32 @@ cd stencil-library
 npm install
 ```
 
+##### Component Imports
+
+If you encounter import errors in your `components.ts` file, update the Stencil library's `package.json` to include comprehensive exports:
+
+```json title="package.json"
+"exports": {
+ ".": {
+   "import": "./dist/stencil-library/stencil-library.esm.js",
+   "require": "./dist/stencil-library/stencil-library.cjs.js"
+ },
+ "./dist/*": {
+   "import": "./dist/*",
+   "types": "./dist/*"
+ },
+ "./components/*": {
+   "import": "./dist/components/*.js",
+   "types": "./dist/components/*.d.ts"
+ },
+ "./loader": {
+   "import": "./loader/index.js",
+   "require": "./loader/index.cjs",
+   "types": "./loader/index.d.ts"
+ }
+}
+```
+
 #### Creating a React Component Library
 
 :::note

diff --git a/versioned_docs/version-v4.22/framework-integration/react.md b/versioned_docs/version-v4.22/framework-integration/react.md
@@ -80,6 +80,32 @@ cd stencil-library
 npm install
 ```
 
+##### Component Imports
+
+If you encounter import errors in your `components.ts` file, update the Stencil library's `package.json` to include comprehensive exports:
+
+```json title="package.json"
+"exports": {
+ ".": {
+   "import": "./dist/stencil-library/stencil-library.esm.js",
+   "require": "./dist/stencil-library/stencil-library.cjs.js"
+ },
+ "./dist/*": {
+   "import": "./dist/*",
+   "types": "./dist/*"
+ },
+ "./components/*": {
+   "import": "./dist/components/*.js",
+   "types": "./dist/components/*.d.ts"
+ },
+ "./loader": {
+   "import": "./loader/index.js",
+   "require": "./loader/index.cjs",
+   "types": "./loader/index.d.ts"
+ }
+}
+```
+
 #### Creating a React Component Library
 
 :::note

diff --git a/versioned_docs/version-v4.23/framework-integration/react.md b/versioned_docs/version-v4.23/framework-integration/react.md
@@ -81,6 +81,32 @@ cd stencil-library
 npm install
 ```
 
+##### Component Imports
+
+If you encounter import errors in your `components.ts` file, update the Stencil library's `package.json` to include comprehensive exports:
+
+```json title="package.json"
+"exports": {
+ ".": {
+   "import": "./dist/stencil-library/stencil-library.esm.js",
+   "require": "./dist/stencil-library/stencil-library.cjs.js"
+ },
+ "./dist/*": {
+   "import": "./dist/*",
+   "types": "./dist/*"
+ },
+ "./components/*": {
+   "import": "./dist/components/*.js",
+   "types": "./dist/components/*.d.ts"
+ },
+ "./loader": {
+   "import": "./loader/index.js",
+   "require": "./loader/index.cjs",
+   "types": "./loader/index.d.ts"
+ }
+}
+```
+
 #### Creating a React Component Library
 
 :::note