Impossible to submit required params in react app which is using SwaggerUi component #4745

kokoc · 2018-07-19T13:08:48Z

Prerequisites

OS: macOS
Browser: chrome
Version: 67
Method of installation: npm
Swagger-UI version: 3.17.3
Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Swagger UI is used inside react component. React version is ^16.3.2

Example Swagger/OpenAPI definition: https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/petstore.yaml

Swagger-UI configuration options:

SwaggerUI({
  dom_id: "#swagger",
  url: spec_url,
})

Describe the bug you're encountering

Impossible to specify the required parameter for routes like /get/{petId}. The UI just remove it when I'm clicking on Try it Out -> Execute button.

To reproduce...

Steps to reproduce the behavior:

Click on any route with required parameter. E.g. /pet/{petId}
Click "Try it out" button
Specify pet id
Click on "execute" button
See error - pet id was removed, petId field is red. UI doesn't send any http request

Expected behavior

UI sends the HTTP request and display the results

Screenshots

video

Additional context or thoughts

This is most visible issue that have direct impact on functionality. However, there are tons of JS errors in the chrome console. They appear on almost every stage: page load, authorization modal window, submiting requests, etc.

I think most of problems come from different react versions used in app and swagger ui

Other related issues: textarea with console curl command always show curl -X "undefined" instead of actual command(HTTP request is different)

The text was updated successfully, but these errors were encountered:

adailey14 · 2018-07-24T20:19:35Z

I am facing the same issue. Also using swagger-ui imported into my own react project.

shockey · 2018-07-25T01:18:48Z

Hey @kokoc, this is because you're using React 16 in your project - we currently don't support that. You might be able to get away with isolating Swagger UI: consider using an iframe or Shadow DOM for the time being.

Take a look at the other tickets in epic: usage in react@16 for more context, and possible solutions we've come up with.

This is something that we want to fix, but more input would be great 😄

kokoc · 2018-08-02T09:47:00Z

Thanks for clarifications. You right, iframes fix the issue.

Here is a snippet that might be useful for other people:

    componentDidMount() {
        var url = 'your url';
        var page = `<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Swagger</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/swagger-ui.css">


</head>
<body>

<div id="swagger-ui"></div>

<script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
<script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>

<script>
    window.onload = function() {
        // Build a system
        const ui = SwaggerUIBundle({
            url: "${url}",
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],
            plugins: [
                SwaggerUIBundle.plugins.DownloadUrl
            ],
            layout: "BaseLayout"
        })
        window.ui = ui
    }
</script>
</body>
</html>`;
        var frame = this.refs.frame;

        var ifrmDoc = frame.contentWindow.document;
        ifrmDoc.open();
        ifrmDoc.write(page);
        ifrmDoc.close();
    }
    shouldComponentUpdate() {
        return false;
    }
    render() {
        return (
            <div className="container">
                <iframe id="frame" ref="frame"/>
            </div>
        );
    }

tomwatt · 2018-10-03T15:04:26Z

Same issue for me - unable to submit required params from a SwaggerUI component in a react 16.5.2 app. Details all identical to above. If there's any more info I could provide that would be useful, let me know - Would love to know if there was any timeline for full react 16 support.

shockey · 2018-10-09T19:15:15Z

@tomwatt, I don't have a timeline for you, but just so you know - this is on our radar. We see you!

newdaveespionage · 2019-01-16T19:46:59Z

Adding this note in case someone comes upon this issue and thinks "I'm not integrating this into a React 16 app, why might I be seeing this?"

This also happens in a dev environment running Swagger UI "standalone" with another React-dependent tool being used in the same dev install.

To recreate, install Storybook as a devDependency, and implement a simple one page Swagger UI display separately in the same dev environment (meaning, installed as a devDependency as well) following the Swagger UI documentation. Storybook's React dependency is hard-set, so it's impossible to avoid installing 16 in this scenario, and this bug is then exposed for any required field.

I'm looking at breaking either Storybook or Swagger into a separate project, but due to requirements around our project, both have to live in the same repository and aren't easily built separately.

If I can contribute to one of the outstanding issues in the React 16 epic, I'll give it a shot.

gschrader · 2019-01-29T19:46:06Z

I'm glad I found this issue was raised, I always thought it was something in my code that was causing it grief and I just never had the time to look at it. Given that React 16 is pretty much the default now hopefully this can be addressed. I'm not sure what I can do to help it along but I certainly will be help to test the fix.

sertunc · 2019-02-07T08:36:55Z

Hello, I solve this problem with these version

"react": "16.2.0",
"swagger-ui": "^3.9.1",

shockey · 2019-02-11T18:16:11Z

Hi everyone!

I'm going to be working on this in the near future. Since it largely involves integrations within existing applications, I'd like to have some folks test out what I come up with before we ship it.

If you'd like to help out, please email me (address in profile) and I'll be in touch.

iKrushYou · 2019-02-11T18:36:04Z

thanks @kokoc for your temporary solution.
@shockey I emailed you -- i'm happy to help (also, sorry i somehow didn't find this issue before making a new one. feel free to close that one)

xehpuk · 2019-02-14T08:57:29Z

This works locally with webpack-dev-server while it doesn't work with a webpack build. Any ideas why?

echo-bravo-yahoo · 2019-02-18T23:22:37Z

So, I ran into this issue & solved it by removing the debounce on the input. That PR is available here: #4982

Could other people affected merge in that PR to their project and see if it fixes their use case? If so, that PR should either be merged or we should investigate why that input was debounced when others aren't, if it needs to be, and if lodash or a homegrown debounce can be put in its place instead.

shockey · 2019-03-02T19:46:05Z

Fixed!

We've just released swagger-ui-react, which declares React as a peer dependency. I've tested this module within a React 16 create-react-app, and the required parameter issue is no longer present.

djeikyb · 2019-03-26T17:06:48Z

So, I have that case mentioned earlier.. I have an angular app! Why is there a react dependency conflict? Thanks to that comment and npm ls, I realize it's the dev dependency on storybook. Here's a quick working example of an angular 7 component using swagger-ui-react 3.22.0. Not shown is including the swagger css path (starting at node_modules) in angular.json, at json node: projects.your_project.architect.build.styles. Hope it's useful to someone!

import {
  AfterViewInit,
  Component,
  ElementRef,
} from '@angular/core'

import SwaggerUI from 'swagger-ui-react'
import { environment } from '@env/environment'
import { KeycloakService } from '@app/core/services'
import * as React from 'react'
import * as ReactDOM from 'react-dom'

@Component({
  selector: 'app-swagger',
  template: '<div class="swagger-container"></div>',
})
export class ApiDocsComponent implements AfterViewInit {

  constructor(private el: ElementRef, private keycloak: KeycloakService) {
  }

  ngAfterViewInit() {
    const props = {
      url: environment.api_base_url + '/v1/swagger.json',
      requestInterceptor: async a => {
        const token = await this.keycloak.getToken()
        a.headers['authorization'] = 'bearer ' + token
        return a
      },
    }
    ReactDOM.render(
      React.createElement(SwaggerUI, props, null),
      this.el.nativeElement,
    )
  }
}

shockey · 2019-04-09T23:31:14Z

@djeikyb brilliant find! thanks for writing this up 😄

pengiundev · 2019-04-12T14:30:06Z

I'm using this in a Vue app and it still shows curl -X "undefined" using swagger-ui: 3.22.0 and this code

<template>
	<div>
		<div id='swagger'></div>
	</div>
</template>

<script>
	import SwaggerUI from 'swagger-ui'
	import 'swagger-ui/dist/swagger-ui.css';
	import StandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';

	import {getProfile} from '../../store/identity'

	let swagger;
	export default {
		mounted() {
			this.$nextTick(() => {
				swagger = SwaggerUI({
					docExpansion: 'list',
			  		dom_id: '#swagger',
			  		url: "api",
		  			plugins: [
		  				StandalonePreset,
		  			],
					layout: 'StandaloneLayout',
			  		requestInterceptor: req => {
			  			req.headers['Authorization'] = 'Bearer ' + getProfile().jwt
			  		},
				})	
				swagger.preauthorizeApiKey("Bearer", getProfile().jwt)
			})
		},
</script>

Do I have to use swagger-ui-react instead?

shockey added the epic: usage in react@16 label Jul 25, 2018

maciejgroenke mentioned this issue Aug 7, 2018

Incorrect validation for int64 #4786

Closed

shockey mentioned this issue Aug 9, 2018

Cannot read property 'slice' of undefined #4807

Closed

shockey added the type: integration bug label Aug 16, 2018

calmdev mentioned this issue Aug 30, 2018

Required Header Param Resets State without Executing #4845

Closed

echo-bravo-yahoo mentioned this issue Oct 30, 2018

Remove DebounceInput from JsonSchema_string #4982

Closed

17 tasks

shockey mentioned this issue Mar 1, 2019

feature: swagger-ui-react module #5207

Merged

OrKoN mentioned this issue Mar 2, 2019

Gatsby with swagger-ui gatsbyjs/gatsby#11081

Closed

shockey closed this as completed Mar 2, 2019

nightowlengineer mentioned this issue May 21, 2019

improvement: expose docExpansion setting as a prop in swagger-ui-react #5242

Merged

17 tasks

d1ndra mentioned this issue May 21, 2019

Support for customisation in swagger-ui-react? #5367

Open

tmkasun mentioned this issue Jun 4, 2019

Swagger-UI intergration regression can't provide custom plugins, presets etc wso2/product-apim#4958

Closed

pwan001-dev mentioned this issue Aug 8, 2019

[swagger-ui-react] Required headers fail validation (with values) #5521

Closed

rahulbot mentioned this issue Dec 9, 2019

api console not working correctly mediacloud/web-tools#1698

Closed

Vaalyn mentioned this issue Mar 19, 2020

Swagger API endpoints not executing AzuraCast/AzuraCast#2534

Closed

lock bot added the locked-by: lock-bot label Apr 15, 2020

lock bot locked and limited conversation to collaborators Apr 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Impossible to submit required params in react app which is using SwaggerUi component #4745

Impossible to submit required params in react app which is using SwaggerUi component #4745

kokoc commented Jul 19, 2018 •

edited

Loading

adailey14 commented Jul 24, 2018

shockey commented Jul 25, 2018

kokoc commented Aug 2, 2018 •

edited

Loading

tomwatt commented Oct 3, 2018

shockey commented Oct 9, 2018

newdaveespionage commented Jan 16, 2019

gschrader commented Jan 29, 2019

sertunc commented Feb 7, 2019

shockey commented Feb 11, 2019

iKrushYou commented Feb 11, 2019

xehpuk commented Feb 14, 2019

echo-bravo-yahoo commented Feb 18, 2019

shockey commented Mar 2, 2019

djeikyb commented Mar 26, 2019

shockey commented Apr 9, 2019

pengiundev commented Apr 12, 2019

Impossible to submit required params in react app which is using SwaggerUi component #4745

Impossible to submit required params in react app which is using SwaggerUi component #4745

Comments

kokoc commented Jul 19, 2018 • edited Loading

Prerequisites

Content & configuration

Describe the bug you're encountering

To reproduce...

Expected behavior

Screenshots

Additional context or thoughts

adailey14 commented Jul 24, 2018

shockey commented Jul 25, 2018

kokoc commented Aug 2, 2018 • edited Loading

tomwatt commented Oct 3, 2018

shockey commented Oct 9, 2018

newdaveespionage commented Jan 16, 2019

gschrader commented Jan 29, 2019

sertunc commented Feb 7, 2019

shockey commented Feb 11, 2019

iKrushYou commented Feb 11, 2019

xehpuk commented Feb 14, 2019

echo-bravo-yahoo commented Feb 18, 2019

shockey commented Mar 2, 2019

djeikyb commented Mar 26, 2019

shockey commented Apr 9, 2019

pengiundev commented Apr 12, 2019

kokoc commented Jul 19, 2018 •

edited

Loading

kokoc commented Aug 2, 2018 •

edited

Loading