I have a Javascript module that looks like:
export function test() {
return "Hello";
}
I need to import this script in React. This is what I tried:
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
});
This gives me the error:
window.test is not a function
Note, that if I remove export from the JS file then it works. However, I need the export and not sure why adding export breaks it.
Any clues?
Edit: Tried using import like this:
useEffect(() => {
const getTest = async function() {
const uri = "https://remote/path/to/test.js";
const { test } = await import(uri);
console.log(test());
}
getTest();
}
}, []);
However, this gives the 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;