context.stylis is not a function, error with the React Novu package
I am implementing Novu onto my codebase. A few days ago I tested Novu on a test app built with React and it worked fine. Now, my real app is also built with React but uses React Router to simulate a multi-page app, and it's far more complex than the test app. Adding the Novu notification center to a component in my app resulted in the error you can see on the added screenshot, when React tries to render the notification center
It seems to relate the emotion CSS library, and I thought it had to do with the dependencies not installing correctly, so I deleted my node_modules and did a clean install, but it doesn't work, the error keeps appearing. Other things that I have thought of is that it could be related to the React version (my codebase has the 16.8.6), but I wanna be sure of that before going through the hassle of updating React and potentially breaking stuff.
Anyone got any leads on how to solve it?
4 Replies
For more context, this is the code for my notification center:
In case anyone else runs into this issue, the problem was a conflicting package which was using the emotion utils just as the Novu Notification Center one. I am using React Select, and React Select was declaring the emotion/utils package globally, the version 0.8.2, and then, Novu was declaring a higher version within its own dependencies, version 1.2.1, as far as I can remember. The problem, it seems, was that the Novu package was using the top level dependency instead of the one it resolved, so it wasn't using the emotion/utils version it needed.
I solved it by removing react-select and novu, then installing novu with the --save flag and afterwards, installing react-select. Now, the top-level emotion/utils is version 1.2.1 and novu is using it.
@Bocorbojon, you just advanced to level 2!
@Bocorbojon Thank you very much for providing this insight!