@@ -3,6 +3,7 @@ title: Cookbook | Re-exporting loaders
3
3
contributors :
4
4
- gioboa
5
5
- aendel
6
+ - extrordinaire
6
7
updated_at : ' 2023-12-15T11:00:00Z'
7
8
created_at : ' 2023-12-15T11:00:00Z'
8
9
---
@@ -84,12 +85,20 @@ export default component$(() => {
84
85
85
86
<CodeSandbox src = " /src/routes/demo/cookbook/re-exporting-loaders/" style = { { height: ' 15em' }} />
86
87
87
- ### Third-party libraries example
88
+ ### Preventing issues with < u >indirect</ u > ` routeLoader$ ` usage ( Third-Party Libraries Example)
88
89
89
90
It may happen that we need to integrate third-party libraries over which we have no control over how it works.
90
91
Let's think for example about integrating a payment method into our application.
91
92
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
+
93
102
94
103
#### Here is our code:
95
104
@@ -102,6 +111,10 @@ import { ThirdPartyPaymentComponent, useThirdPartyPaymentLoader } from './third-
102
111
export { useThirdPartyPaymentLoader } from ' ./third-party-library' ;
103
112
104
113
export default component$ (() => {
114
+
115
+ // Manually register the loader so the optimizer sees it
116
+ useThirdPartyPaymentLoader ()
117
+
105
118
return (
106
119
<section >
107
120
<ThirdPartyPaymentComponent />
0 commit comments