Path parameter issues: "Required field is not provided" or interpolates to a ','

Q&A

• OS: Windows Sub-system for Linux (WSL): Ubuntu 18.04.3 LTS

$ cat /etc/os-release | head -2
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"

• Browser: Chrome 79.0.3945.88 & Firefox 68.4.0esr
• Method of installation:

$ npm -v
6.13.4

• Swagger-UI version: 3.24.3
• Swagger/OpenAPI version: OpenAPI 3.0.1

Content & configuration

Example Swagger/OpenAPI definition: Stripped down version of PetStore example in OpenAPI 3.0.1

{
    "openapi": "3.0.1",
    "info": {
        "description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "version": "2.0.0",
        "title": "Swagger Petstore",
        "termsOfService": "http://swagger.io/terms/",
        "contact": {
            "email": "[e-mail]"
        },
        "license": {
            "name": "Apache 2.0",
            "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
        }
    },
    "servers": [
        {
            "url": "https://petstore.swagger.io/v2"
        }
    ],
    "tags": [
        {
            "name": "pet",
            "description": "Everything about your Pets",
            "externalDocs": {
                "description": "Find out more",
                "url": "http://swagger.io"
            }
        }
    ],
    "paths": {
        "/pet/{petId}": {
            "get": {
                "tags": [
                    "pet"
                ],
                "summary": "Find pet by ID",
                "description": "Returns a single pet",
                "operationId": "getPetById",
                "parameters": [
                    {
                        "name": "petId",
                        "in": "path",
                        "description": "ID of pet to return",
                        "required": true,
                        "schema": {
                            "type": "integer",
                            "format": "int64"
                        }
                    }
                ],
                "responses": {
                    "200": {
                        "description": "successful operation",
                        "content": {
                            "application/json": {
                                "schema": {
                                    "$ref": "#/components/schemas/Pet"
                                }
                            },
                            "application/xml": {
                                "schema": {
                                    "$ref": "#/components/schemas/Pet"
                                }
                            }
                        }
                    },
                    "400": {
                        "description": "Invalid ID supplied"
                    },
                    "404": {
                        "description": "Pet not found"
                    }
                }
            }
        }
    },
    "components": {
        "schemas": {
            "Category": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "name": {
                        "type": "string"
                    }
                },
                "xml": {
                    "name": "Category"
                }
            },
            "Pet": {
                "type": "object",
                "required": [
                    "name",
                    "photoUrls"
                ],
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "category": {
                        "$ref": "#/components/schemas/Category"
                    },
                    "name": {
                        "type": "string",
                        "example": "doggie"
                    },
                    "photoUrls": {
                        "type": "array",
                        "xml": {
                            "wrapped": true
                        },
                        "items": {
                            "type": "string",
                            "xml": {
                                "name": "photoUrl"
                            }
                        }
                    },
                    "tags": {
                        "type": "array",
                        "xml": {
                            "wrapped": true
                        },
                        "items": {
                            "xml": {
                                "name": "tag"
                            },
                            "$ref": "#/components/schemas/Tag"
                        }
                    },
                    "status": {
                        "type": "string",
                        "description": "pet status in the store",
                        "enum": [
                            "available",
                            "pending",
                            "sold"
                        ]
                    }
                },
                "xml": {
                    "name": "Pet"
                }
            },
            "Tag": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "integer",
                        "format": "int64"
                    },
                    "name": {
                        "type": "string"
                    }
                },
                "xml": {
                    "name": "Tag"
                }
            }
        }
    }
}

Swagger-UI configuration options:

    SwaggerUI({
      docExpansion: 'list',
      domNode: document.getElementById(config.swaggerElementID),
      spec: swaggerJsonObject,
    });

Your query string config: N/A

Describe the bug you’re encountering

When the path parameter required property is set to true, all input is rejected with error: Required field is not provided (screenshot 1).

If I set the path parameter required property to false, the path parameter interpolates to a ‘,’ (screenshot 2). I’ve tried defining the path parameter inline as well as in the components section and various other things, but always get the comma.

Example:

Curl

curl -X GET "https://petstore.swagger.io/v2/pet/," -H "accept: */*"

Request

https://petstore.swagger.io/v2/pet/,

Response body

{
  "code": 404,
  "type": "unknown",
  "message": "java.lang.NumberFormatException: For input string: \",\""
}

To reproduce…

Steps to reproduce the behavior:

1. npm run-script start, which executes react-scripts start
2. Click on ‘Try it now’
3. Enter an ID
4. If the path parameter required property is set to true, see error: Required field is not provided, else see server response HTTP 404 Not Found for https://petstore.swagger.io/v2/pet/,

Expected behavior

The path parameter should interpolate properly regardless of whether or not it is required.

Screenshots

Path parameter required property set to true

Path parameter required property set to false

Additional context or thoughts

$ node -v
v12.14.0

[roman-sereda]

@domdomegg @hkosova This problem occur when swagger-ui and its dependency react-debounce-input use different versions of react. This happens because react-debounce-input has "react": "^15.3.0 || ^16.0.0", so if your project use react v16, it will use it too, but swagger-ui will use always v15. In that case, for some reason, setState’s callback in react-debounce-input is not working, so onChange prop is not firing. So swagger-ui-dist works, because it has all dependencies in one file and forces react-debounce-input to use react v15.

For example, if you have react 16 in your project, then your node_modules will look like this:

-node_modules └ react(16) └ react-debounce-input(3.2.2) <- will use project react version └ swagger-ui …└ node_modules …└ react(15)

In this case, the problem occur, to fix this, you can force react-debounce-input to be installed in swagger-ui node_modules by installing older version of react-debounce-input, like this:

npm i --save-dev react-debounce-input@3.1.0

-node_modules └ react(16) └ react-debounce-input(3.1.0) └ swagger-ui …└ node_modules …└ react(15) …└ react-debounce-input(3.2.2) <- will use the same react version as swagger-ui

the proper solution would be to change somehow react-debounce-input dependency to "react": "^15.3.0"

swagger-ui-react doesn’t help, its forced to use v16, but has a lot of deprecated stuff and i have a lot of warnings in console

[florm]

I have the sme issue. In my case with de headers. This is my header filter:

And then…

Problem solved! In my case, I change “String” for “string”, and now it’s works!