search

loba-b / react-equal-height

Compares element heights and sets the highest
MIT License
18 stars 9 forks source link

react-equal-height/clean doesn't work on NextJS app router #8

Closed mimoskal closed 5 months ago

mimoskal commented 1 year ago

Hi, thanks for amazing work, I've used your library on several projects now.

There's a problem with building NextJS app with new app router (I didn't try this on pages router, so I don't know if it's limited to app router):

error node_modules/react-equal-height/index.js (1:8585) @ e.exports [as insertStyleElement]
error ReferenceError: document is not defined

I cloned the library and narrowed down the issue. When I'm importing <EqualHeightElement /> from react-equal-height/clean it seems like that component imports context from the main package and thus trying to inject css styles. Then it fails on ssr, because document is undefined.

I just copied the EqualHeightElement component and changed import to:

import { EqualHeightContext } from 'react-equal-height/clean';

and it worked

niallobrien commented 10 months ago

Thanks for sharing, I can confirm that I experience the same issue when using the pages router with Next v13.

loba-b commented 5 months ago

Hi, sorry for the long reaction time. Fixed in new version v1.3.0 and published NPM