Build error when using isomorphic-dompurify in angular 15 universal

[praveshShetty]

I'm trying to use isomorphic dompurify's sanitize function, in my angular application, which uses angular universal for server side rendering. While there is no error when running the application as a client side rendered one. server side rendering is not working.

I'm importing the sanitize function using ES6 syntax:

import { sanitize } from 'isomorphic-dompurify';

Is this a known issue.

I'm currently using

"angular" : 15.2.2
"typescript": "4.9.4"
"node" : 16.19.1
"isomorphic-dompurify": "^1.7.0"

[kkomelin]

Hi @praveshShetty,

Thanks for reporting the issue.

Unfortunately, the log doesn't say a lot. Could you please provide a sandbox project where I could reproduce the issue?

[kkomelin]

What is your hosting environment?

[JeremyGuinn]

@kkomelin, I'm also seeing this error, but I have a bit more info relating to it.

import DOMPurify from 'isomorphic-dompurify';

./node_modules/jsdom/lib/jsdom/living/generated/utils.js:34
const AsyncIteratorPrototype = Object.getPrototypeOf(Object.getPrototypeOf(async function* () {}).prototype);
                                      ^


TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at Object.39178 (./node_modules/jsdom/lib/jsdom/living/generated/utils.js:34:39)
    at __webpack_require__ (./webpack/bootstrap:19:1)
    at Object.96057 (./node_modules/jsdom/lib/api.js:11:18)
    at __webpack_require__ (./webpack/bootstrap:19:1)
    at <anonymous> (./node_modules/isomorphic-dompurify/index.js:1:196)
    at Object.64682 (./node_modules/isomorphic-dompurify/index.js:1:262)
    at __webpack_require__ (./webpack/bootstrap:19:1)
    at Module.682 (./src/app/core/services/footer.service.ts:7:21)
    at __webpack_require__ (./webpack/bootstrap:19:1)

Node.js v18.12.1

I'll update this comment with a minimal reproduction.

[kkomelin]

Thanks @JeremyGuinn for the information.
Please also take a look at the other jsdom related issue #54 , if it has a workaround which can help you.

[JeremyGuinn]

Here is a codesandbox that gets the same error when running dev:ssr

[kkomelin]

Thanks @JeremyGuinn,
From what I can see, the reason is the same as here #54:

Warning: Module not found: Error: Can't resolve 'canvas' in '/workspace/node_modules/isomorphic-dompurify/node_modules/jsdom/lib/jsdom'

[JeremyGuinn]

Yeah, I'm able to resolve this by using @angular-builders/custom-webpack, and using the same solution from #54 by adding the externals so webpack doesn't try to bundle them in the browser code. I've updated the codesandbox with this fix.

angular.json

{
  ...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        },
        ...
      },
      ...
    },
    ...
    "server": {
      "builder": "@angular-builders/custom-webpack:server",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        },
        ...
      },
      ...
    },
    ...
  },
  ...
}

webpack.config.js

module.exports = function(config) {
  return {
    ...config,
    externals: {
      ...config.externals,
      canvas: 'commonjs canvas',
      jsdom: 'commonjs jsdom'
    }
  }
}

[kkomelin]

That's great news @JeremyGuinn. Thanks for sharing the working solution!

My guess is you only need the proposed customization of the Webpack config for the server side (@angular-builders/custom-webpack:server). But I didn't try it myself.