Puede instalar fácilmente este paquete desde npmjs.com , donde puede encontrar la documentación y los ejemplos necesarios para comenzar. Instalación:

npm i @mollie/api-client

el punto aquí es que el efecto se invoca después de que el componente de reacción se monte y se presente al usuario. La siguiente línea en la que intenta llamar a Mollie, de hecho, se ejecuta antes cuando el componente se está construyendo pero aún no se procesa.

Hay varias opciones de lo que puede hacer al respecto:

1. Importe el script en el archivo index.html como lo hace para la solución estándar que no es React. Debe haber una carpeta "pública" que contenga este archivo en caso de uso de crear-reaccionar-aplicación u otro lugar en caso de configuración de proyecto personalizado. El HTML debe existir en cualquier forma, incluso en caso de que se genere dinámicamente en el lado del servidor. Posteriormente se puede crear una instancia de mollie en el componente o globalmente.
2. Usa múltiples efectos en el componente React: uno para cargar Mollie y otro para usarlo cuando está cargado:

 // MollieExample.jsx const MollieExample = () => { const [mollie, setMollie] = useState(); useEffect(() => { const script = document.createElement('script'); script.src = 'https://js.mollie.com/v1/mollie.js'; script.addEventListener("load", () => { setMollie(window.Mollie(/* Mollie arguments */); }); document.body.appendChild(script); }, []); useEffect(() => { if (mollie) { console.log('Mollie exists here'); console.log(typeof mollie); } } , [mollie]); return <p>typeof mollie: {typeof mollie}</p>; };

3. Use la carga dinámica de secuencias de comandos en caso de que sea necesario con una instancia de Mollie compartida globalmente a través de un enlace personalizado:

 // useMollie.js let molliePromise; const useMollie = (effect, deps) => { const [mollie, setMollie] = useState(); const mollieCb = useCallback((mollie) => effect(mollie), deps); useEffect(() => { if (!molliePromise) { molliePromise = new Promise((resolve) => { const script = document.createElement("script"); script.src = "https://js.mollie.com/v1/mollie.js"; script.addEventListener("load", () => { resolve(window.Mollie(/* Mollie arguments */); }); document.body.appendChild(script); }); } molliePromise.then((mollie) => setMollie(mollie)); }, []); useEffect(() => { if (mollie) { mollieCb(mollie); } }, [mollie, mollieCb]); }; // MollieConsumer.jsx const MollieConsumer = () => { useMollie((mollie) => { console.log('Mollie exists here'); console.log(typeof mollie); }, [/* useMollie effect callback dependencies array */]); return ( <p>Mollie consumer</p> ); }; // App.jsx function App() { /* Both consumers use the same instance of Mollie */ return ( <div> <MollieConsumer/> <MollieConsumer/> </div> ); }

Supongo que terminarás usando alguna opción intermedia. Por ejemplo, con la importación de secuencias de comandos en index.html (o cualquier otro tipo de página HTML que tenga que contenga el elemento host de la aplicación React) y el gancho global.