how to import a npm package which not support SSR?
Unanswered
Kintamani posted this in #help-forum
KintamaniOP
I've tried use dynamic import
but if the importee use react hooks internaly, the application will crash
because can't use hooks inside of
import() in useEffect, like // app.js
import {useEffect} from 'react'
function MyButton() {
const [Comp, setComp] = useState();
useEffect(() => {
// setComp(lazy(import("./test")))
import("./test").then((mod) => {
setComp(mod.default);
});
}, []);
return Comp ? <Comp /> : null;
}
// test.js
import { useMemo } from "react";
export default () => {
const title = useMemo(()=>'123',[])
return <div>{213}</div>;
};but if the importee use react hooks internaly, the application will crash
because can't use hooks inside of
useEffect1 Reply
@Kintamani I've tried use dynamic import `import()` in useEffect, like
jsx
// app.js
import {useEffect} from 'react'
function MyButton() {
const [Comp, setComp] = useState();
useEffect(() => {
// setComp(lazy(import("./test")))
import("./test").then((mod) => {
setComp(mod.default);
});
}, []);
return Comp ? <Comp /> : null;
}
// test.js
import { useMemo } from "react";
export default () => {
const title = useMemo(()=>'123',[])
return <div>{213}</div>;
};
but if the importee use react hooks internaly, the application will crash
because can't use hooks inside of `useEffect`
hi, use
next/dynamic insteadimport dynamic from 'next/dynamic'
const Test = dynamic(() => import('./test'), { ssr:false })
function MyButton() {
return <Test />
}