Skip to content

Commit 415f6ae

Browse files
docs: improve cookbook re-exporting loaders section (#7646)
1 parent 6479c3b commit 415f6ae

File tree

1 file changed

+15
-2
lines changed
  • packages/docs/src/routes/docs/(qwikcity)/re-exporting-loaders

1 file changed

+15
-2
lines changed

packages/docs/src/routes/docs/(qwikcity)/re-exporting-loaders/index.mdx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Cookbook | Re-exporting loaders
33
contributors:
44
- gioboa
55
- aendel
6+
- extrordinaire
67
updated_at: '2023-12-15T11:00:00Z'
78
created_at: '2023-12-15T11:00:00Z'
89
---
@@ -84,12 +85,20 @@ export default component$(() => {
8485

8586
<CodeSandbox src="/src/routes/demo/cookbook/re-exporting-loaders/" style={{ height: '15em' }} />
8687

87-
### Third-party libraries example
88+
### Preventing issues with <u>indirect</u> `routeLoader$` usage (Third-Party Libraries Example)
8889

8990
It may happen that we need to integrate third-party libraries over which we have no control over how it works.
9091
Let's think for example about integrating a payment method into our application.
9192
We are provided with a component to integrate into the page, but we have no control over what happens under the hood of this component.
92-
Here, if this library needs `routeAction$` or `routeLoader$` we must re-export them to allow the correct functioning of our library.
93+
94+
If these third-party components rely on `routeLoader$` or `routeAction$` functions, we must manually re-export and register those inside
95+
a component that exists within the route boundary. This is necessary so the Qwik optimizer can detect and include them during the build.
96+
97+
> **Note:** Starting in Qwik v2.0, manual registration will no longer be needed. However, until then, the optimizer may **miss**
98+
> `routeLoader$` functions if they’re used inside components that are **conditionally rendered** (e.g., toggled with a signal).
99+
>
100+
> If you don’t manually register the loader in these cases, you may encounter undefined behavior. <u>Avoid skipping this step</u>.
101+
93102

94103
#### Here is our code:
95104

@@ -102,6 +111,10 @@ import { ThirdPartyPaymentComponent, useThirdPartyPaymentLoader } from './third-
102111
export { useThirdPartyPaymentLoader } from './third-party-library';
103112

104113
export default component$(() => {
114+
115+
// Manually register the loader so the optimizer sees it
116+
useThirdPartyPaymentLoader()
117+
105118
return (
106119
<section>
107120
<ThirdPartyPaymentComponent />

0 commit comments

Comments
 (0)