How to properly import library with no ssr - error: ... is not a constructor

Asked Nov 20 '20 at 15:57

Active Nov 20 '20 at 15:57

Viewed 266 times

I have the following import i would usually use:

import ASScroll from '@ashthornton/asscroll'

But since the library uses the window object, which isn't available server side, I need to dynamically load it with next.js.

Here's what I tried and how I need to use initialize it:

const {ASScroll} = dynamic(import('@ashthornton/asscroll'), {ssr: false})

const smoothScroll = new ASScroll({element: '.outer'})

I get the following error though:

TypeError: ASScroll is not a constructor

asked Nov 20 '20 at 15:57

Johnny Kontrolletti

The error indicates that you imported something else than ASScroll, as ASScroll. Have you tried: ```const ASScroll = dynamic(import('@ashthornton/asscroll'), {ssr: false})``` ? – Master117 Nov 20 '20 at 16:00
@Master117 Yes, gives me the same error and my IDE then tells me: `Method expression is not of Function type` as well – Johnny Kontrolletti Nov 20 '20 at 16:01
Have you thought about loading that part on client side? https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app – Master117 Nov 20 '20 at 16:06
@Master117 That's what I tried with next/dynamic - have you thought another way? – Johnny Kontrolletti Nov 20 '20 at 16:10
Have you tried using componentDidMount() ? – Master117 Nov 20 '20 at 16:16
@Master117 Ahh yes, I tried it within useEffect(), but apparently the import breaks it already - it points to: `> 1 | module.exports = require("@ashthornton/asscroll"); ` – Johnny Kontrolletti Nov 20 '20 at 16:17
have you tried moving the import inside the useEffect? Not just the call to it. – Master117 Nov 20 '20 at 16:22
@Master117 I think this would work, but I don't know how to properly get `ASScroll` when using inside of useEffect() with `import()` – Johnny Kontrolletti Nov 20 '20 at 16:39
import ASScroll from '@ashthornton/asscroll' should work inside useEffect – Master117 Nov 20 '20 at 16:41
@Master117 'import' and 'export' may only appear at the top level – Johnny Kontrolletti Nov 21 '20 at 11:23
both import and export can happen at other parts as well in react. – Master117 Nov 21 '20 at 15:02
@Master117 That's the error I get from the console, am using nextjs – Johnny Kontrolletti Nov 21 '20 at 17:27

How to properly import library with no ssr - error: ... is not a constructor

0 Answers0