SSR on Next.js doesn't work

[yagudaev]

Thank you for this great component 👍 . I can't wait to use it!

I tried to use it on my Next.js project and it complained about:

SyntaxError: Cannot use import statement outside a module

The reason is that node.js assumes you use common.js modules unless you have type: 'modules' in the package.json. I quickly manually changed the code to use commonjs modules (require and module.exports). However, it still requires window.document somewhere in the code.

I'm not sure how other libraries do this, but it seems to work flawlessly with say react-color (https://github.com/casesandberg/react-color). It might be a good place to start to find out.

If you have any quick work arounds that would be great too, I tried the one mentioned here: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr, but since this lib uses named exports it didn't quite work.

[sneas]

Hi Michael, thank you for the detailed explanation of the issue. I'll give it a look, hopefully, this week.

And thank you for your kind words and for the ⭐️, this means a lot to me 🥦

[yagudaev]

Workaround:

import dynamic from 'next/dynamic

// Img Comparison Slider cannot be server-side rendered
const ImgComparisonSlider = dynamic(() => import("@img-comparison-slider/react").then((mod) => mod.ImgComparisonSlider), {
  ssr: false
})

This work really well for the time being ^.

There is a thread here about issues with other libraries too: asyncapi/asyncapi-react#177. Would be cool to make the lib SSR compatible.

[sneas]

🎉 This issue has been resolved in version 5.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[sneas]

Hi Michael, the issue has been resolved in @img-comparison-slider/react version 5.0.2.

The component could be used as described in the documentation https://github.com/sneas/img-comparison-slider/blob/master/bindings/react/README.md

Cheers!