Gatsby: Gatsby with swagger-ui

[Meemaw]

Hello! I'm trying to setup a documentation page with swagger-ui inside. I bootsraped my project with gatsby new example. In one of my components I import swagger-ui as:

import SwaggerUI from 'swagger-ui';

This works when running locally, but fails at build time:

WebpackError: TypeError: _dompurify2.default.addHook is not a function

  - swagger-ui.js:1 Object.<anonymous>
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:231508

  - swagger-ui.js:1 __webpack_require__
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4008

  - swagger-ui.js:8 Object.<anonymous>
    [lib]/[swagger-ui]/dist/swagger-ui.js:8:88022

  - swagger-ui.js:1 __webpack_require__
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4008

  - swagger-ui.js:8 Object.<anonymous>
    [lib]/[swagger-ui]/dist/swagger-ui.js:8:78018

  - swagger-ui.js:1 __webpack_require__
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4008

  - swagger-ui.js:1 Object.<anonymous>
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:327245

  - swagger-ui.js:1 __webpack_require__
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4008

  - swagger-ui.js:1 Object.<anonymous>
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:292385

  - swagger-ui.js:1 __webpack_require__
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4008

  - swagger-ui.js:1
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4736

  - swagger-ui.js:1
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:4790

  - swagger-ui.js:1 webpackUniversalModuleDefinition
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:112

  - swagger-ui.js:1 Object../node_modules/swagger-ui/dist/swagger-ui.js
    [lib]/[swagger-ui]/dist/swagger-ui.js:1:2842

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

[itaisteinherz]

I also experienced this while _not_ using Gatsby, and so this is probably related to your configuration and swagger-ui usage. Have you taken a look at this issue?

[sidharthachatterjee]

I can reproduce this

@Meemaw Take a look at this comment in the issue linked by @itaisteinherz

You should definitely not be importing or calling SwaggerUIBundle directly in your server-side application - that code is meant for your user's browser. The only code relevant to server-side applications is the absolutePath helper.

It looks like the bundle isn't SSR friendly

You could load this on the client side only in gatsby-browser.js maybe

[jonniebigodes]

@Meemaw if you haven't already resolved this, i'm implementing a way to handle this.

[OrKoN]

Hi, I have used the following workaround:

1. Import swagger UI in gatsby-browser.js:

import SwaggerUI from 'swagger-ui'
window.SwaggerUI = SwaggerUI;

1. create a wrapper component:

class Swagger extends React.Component {
  componentDidMount() {
    window.SwaggerUI({
        dom_id: '#swagger',
        .....
    });
  }
  render() {
    return <div id="swagger" />
  }
}

This way swagger will not be server-rendered. Instead, it will be loaded in the user's browser.

[OrKoN]

Beware of this issue as well https://github.com/swagger-api/swagger-ui/issues/4745

[DSchau]

Sounds like this is an upstream issue with swagger-ui not being super server-side rendering friendly.

I'd recommend following the remediation as @OrKoN mentioned here. Additionally, I think using null-loader may also help in this case.

Since this is an issue outside of Gatsby and that seems to have a remediation, going to close this out. Please feel free to reply if we can help out further!