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;

2. 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 swagger-api/swagger-ui#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!

[reselbob]

@OrKoN

I want to implement your solution: #11081 (comment)

But, I am new to Gatsby.

Can you tell me exactly where and how to place the code snippets you describe above for the client side rendering solution? Thanks in advance. It will be a big help.