window is not defined while using apex charts (works in dev version but not in build)
Answered
Pigeon tremex posted this in #help-forum
Pigeon tremexOP
I just found out that a package that I am using has window used in many. How to fix this ?
I have kept this but it shows error. And only on the build version it shows error
{(typeof window !== 'undefined') &&<ReactApexChart
options={options}
series={state.series}
type="area"
height={350}
/>}"use client"
import DashboardDisplay from "../../../../components/adminComponents/secondaryComponents/dashboardDisplay";
const Page=()=>{
if(window) return <DashboardDisplay/>
else return <h5> Window error </h5>
}
export default Page;I have kept this but it shows error. And only on the build version it shows error
Answered by B33fb0n3
please try to import your component as dynamic with ssr false like this:
You can call your componnent then like this:
That will ensure, that this component is ONLY loaded on the client, not on the server
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })You can call your componnent then like this:
...
return (
<div>
{/* Load only on the client side */}
<ComponentC />
</div>
)That will ensure, that this component is ONLY loaded on the client, not on the server
3 Replies
please try to import your component as dynamic with ssr false like this:
You can call your componnent then like this:
That will ensure, that this component is ONLY loaded on the client, not on the server
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })You can call your componnent then like this:
...
return (
<div>
{/* Load only on the client side */}
<ComponentC />
</div>
)That will ensure, that this component is ONLY loaded on the client, not on the server
Answer
@B33fb0n3 please try to import your component as dynamic with ssr false like this:
jsx
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
You can call your componnent then like this:
jsx
...
return (
<div>
{/* Load only on the client side */}
<ComponentC />
</div>
)
That will ensure, that this component is ONLY loaded on the client, not on the server
Pigeon tremexOP
It worked, thank you so much !!