1

I have a react app and a components library. Library uses webpack and compiled into umd and uses react and react-dom as externals. Now I want to use it with another project which has Next.js SSR.

I can import components using next/dynamic and they work fine. But lib also has non-component stuff like breakpoints and colors and when I try to import them inside SSR, it complains ReferenceError: self is not defined. Lib's compiled code has self keyword in it. So it seems whenever I try to import breakpoints, next try to run library code server-side and throws.

Cannot use next/dynamic with non-components as it's only for components. I tried conditional import by checking process.browser but failed.

Any thoughts?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
SanLW
  • 91
  • 7
  • 1
    Does this answer your question: [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/a/66100185/1870780)? – juliomalves Nov 30 '21 at 18:25
  • 1
    @juliomalves Yep that worked. Actually I was trying to import things in different places. Instead, created one component (containing lib code) and imported it into the page using `dynamic`. My previous approach is somehow impossible to achieve as trying to import anything outside `dynamic` or `useEffect` causes trouble. Thanks! – SanLW Dec 01 '21 at 08:16

0 Answers0