isomorphic-dompurify: Next.js build error: Window is not defined

isomorphic-dompurify version - 1.9.0 Node version - 18.18.0 Next.js version - 13.5.4 React version - 18.2.0

I am importing my company’s React component library that makes use of Isomorphic DOMPurify. No issues when using it in a client-side app. However, when running yarn build in my Next.js project I am getting ReferenceError: window is not defined and the path in the logs points to the following line of code: var ti=window.DOMPurify||(window.DOMPurify=Vl().default||Vl());

Am I doing something incorrectly?

Here’s a repo for the Next.js app - https://github.com/mikeriley131/next-idp-test And here’s a repo for the component library - https://github.com/mikeriley131/pyrographic-react-component-library

The component library is "npm link"ed to the next app.

When I add the Button component from the library to the Next.js app, it throws the following error:

Server Error
Error: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
../pyrographic-react-component-library/dist/components/Button/index.js (509:9) @ window

  507 | }(Ce)), Ce.exports;
  508 | }
> 509 | var fn = window.DOMPurify || (window.DOMPurify = ht().default || ht());
      |       ^
  510 | function pn(re) {
  511 | const { className: xe, ...z } = re;
  512 | return /* @__PURE__ */ rn("button", { className: `${xe} ${ln.button}`, ...z, children:

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 1
  • Comments: 33 (26 by maintainers)

Commits related to this issue

Most upvoted comments

According to the error description, I can say that Next is trying to use the browser entry point from package.json on server, which is incorrect, so it should be fixed on their side. Subscribe to this issue to get updated when it’s fixed https://github.com/vercel/next.js/discussions/58142 And I’m closing this issue for now.

Thanks @BohdanYavorskyi . I will take a look at your PR. If you need it urgently, you may point out to your fork like this https://stackoverflow.com/a/50734317/1762849

Error points to this line in browser.js as mentioned, so it does seem like browser.js is being used as an entrypoint incorrectly.

Thanks @silasabbott. I agree with your conclusion. Please comment and vote for this issue https://github.com/vercel/next.js/discussions/58142

I’m on a Next.js 14 project here, all up to date, this error is indeed happening still on 14.

Not yet. I’ll give that a try and report back.