Tengo un módulo de Javascript que se parece a:
export function test() {
return "Hello";
}
Necesito importar este script en React. Esto es lo que probé:
const useScript = ({ onLoad } : { onLoad: any }) => {
useEffect(() => {
const script = document.createElement('script');
script.type = "module";
script.src = "remote/path/to/test.js";
script.onload = onLoad
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [onLoad]);
};
const getTest = () => {
window["test"]();
}
useScript({
onLoad: getTest
});
Esto me da el error:
window.test is not a function
Tenga en cuenta que si elimino la export del archivo JS, entonces funciona. Sin embargo, necesito la export y no estoy seguro de por qué agregarla la interrumpe.
¿Alguna pista?
Editar: Intenté usar la import de esta manera:
useEffect(() => {
const getTest = async function() {
const uri = "https://remote/path/to/test.js";
const { test } = await import(uri);
console.log(test());
}
getTest();
}
}, []);
Sin embargo, esto da el error:
Unhandled Rejection (Error): Cannot find module
import React, { lazy, Suspense } from 'react';
import ExternalComponent from './ExternalComponent';
// Importa ExternalComponent utilizando import() para cargarlo dinámicamente
const ExternalComponent = lazy(() => import('./ExternalComponent'));
function App() {
return (
<div>
<h1>Aplicación con Carga Diferida</h1>
<Suspense fallback={<div>Cargando...</div>}>
<ExternalComponent />
</Suspense>
</div>
);
}
export default App;