enum and boolean type in parameters cause Objects are not valid as a child in swagger-ui-react

[cywhale]

Reproduce example:

https://github.com/cywhale/test_swagger

To reproduce...

Steps to reproduce the behavior:

1. git clone https://github.com/cywhale/test_swagger.git
2. npm i
3. npm start

Example Swagger/OpenAPI definition:
test data in repo: public/test.json (format had been validated in https://editor.swagger.io/ without errors)
link: https://github.com/cywhale/test_swagger/blob/main/public/test.json

Swagger-UI configuration options:
js source in src/components/Swagger/index.jsx
link: https://github.com/cywhale/test_swagger/blob/main/src/components/Swagger/index.jsx

Describe the bug you're encountering

1. After npm start, open browser: http://localhost:8080/swag/
2. A Swagger-UI with three testing paths: /v1/{id}, /v1/test_enum to test the error cases: boolean, and enum type, and the 3rd path: /v1/test_ok/{z} is a normal case (without error). Just pull down the paths, and get the errors in console and devTools

That's, if I have boolean or enum type in json, just like the following, error occurred (logs pasted in the end of this issue), and the swagger-ui-react cannot correctly render. If I remove boolean/enum, it correctly render.

        "parameters": [
          {
            "description": "Test boolean",
            "example": true,
            "in": "query",
            "name": "temporal-aggregation",
            "required": false,
            "schema": {
              "type": "boolean"
            }
          }
//or
          {
            "description": "Test enum",
            "example": "10days",
            "in": "query",
            "name": "interval",
            "required": false,
            "schema": {
              "enum": [
                "10days",
                "day",
                "hour"
              ],
              "type": "string"
            }
          }

Expected behavior

Screenshots

1. test boolean error: https://github.com/cywhale/test_swagger/blob/main/test/test_swagger_error_boolean01.PNG
2. test enum error: https://github.com/cywhale/test_swagger/blob/main/test/test_swagger_error_enum01.PNG

Error logs (in devTool)

Error: Objects are not valid as a child. Encountered an object with the keys {size,_origin,_capacity,_level,_root,_tail,__ownerID,__hash,__altered}.

  in select
  in qt
  in Nr
  in 
  in 
  in Tr
  in Et
  in ht
  in WithErrorBoundary(ht)
  in Ne2
  in 
  in G3
  in WithErrorBoundary(G3)
  in WithSystem(WithErrorBoundary(G3))
  in Connect(WithSystem(WithErrorBoundary(G3)))
  in Connect(WithSystem(WithErrorBoundary(G3)))
  in we
  in WithSystem(we)
  in Connect(WithSystem(we))
  in Connect(WithSystem(we))
  in Ar
  in WithErrorBoundary(Ar)
  in WithSystem(WithErrorBoundary(Ar))
  in Connect(WithSystem(WithErrorBoundary(Ar)))
  in Connect(WithSystem(WithErrorBoundary(Ar)))
  in Z3
  in WithErrorBoundary(Z3)
  in WithSystem(WithErrorBoundary(Z3))
  in Connect(WithSystem(WithErrorBoundary(Z3)))
  in Connect(WithSystem(WithErrorBoundary(Z3)))
  in WithRoot(Connect(WithSystem(WithErrorBoundary(Z3))))
  in SwaggerUI2 (at /home/odbadmin/proj/test_swagger/src/components/Swagger/index.jsx:9)
  in Swagger (at /home/odbadmin/proj/test_swagger/src/components/Home.jsx:15)
  in Home (at /home/odbadmin/proj/test_swagger/src/app.tsx:21)
  in App (at /home/odbadmin/proj/test_swagger/src/main.tsx:6)
    Preact 10
 
Object { componentStack: "  in select\n  in qt\n  in Nr\n  in \n  in \n  in Tr\n  in Et\n  in ht\n  in WithErrorBoundary(ht)\n  in Ne2\n  in \n  in G3\n  in WithErrorBoundary(G3)\n  in WithSystem(WithErrorBoundary(G3))\n  in Connect(WithSystem(WithErrorBoundary(G3)))\n  in Connect(WithSystem(WithErrorBoundary(G3)))\n  in we\n  in WithSystem(we)\n  in Connect(WithSystem(we))\n  in Connect(WithSystem(we))\n  in Ar\n  in WithErrorBoundary(Ar)\n  in WithSystem(WithErrorBoundary(Ar))\n  in Connect(WithSystem(WithErrorBoundary(Ar)))\n  in Connect(WithSystem(WithErrorBoundary(Ar)))\n  in Z3\n  in WithErrorBoundary(Z3)\n  in WithSystem(WithErrorBoundary(Z3))\n  in Connect(WithSystem(WithErrorBoundary(Z3)))\n  in Connect(WithSystem(WithErrorBoundary(Z3)))\n  in WithRoot(Connect(WithSystem(WithErrorBoundary(Z3))))\n  in SwaggerUI2 (at /home/odbadmin/proj/test_swagger/src/components/Swagger/index.jsx:9)\n  in Swagger (at /home/odbadmin/proj/test_swagger/src/components/Home.jsx:15)\n  in Home (at /home/odbadmin/proj/test_swagger/src/app.tsx:21)\n  in App (at /home/odbadmin/proj/test_swagger/src/main.tsx:6)\n" }

Additional context or thoughts

I use preactjs 10.11.1(latest version), and vite 3.1.4. I'm not sure if it's will be a cause for this issue

  "dependencies": {
    "history": "^5.3.0",
    "preact": "^10.11.1",
    "preact-router": "^4.1.0",
    "swagger-ui-react": "^4.14.2"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.4.0",
    "@rollup/plugin-replace": "^4.0.0",
    "esbuild": "^0.15.9",
    "fs": "^0.0.1-security",
    "path": "^0.12.7",
    "typescript": "^4.8.4",
    "vite": "^3.1.4"
  }

[tim-lai]

I use preactjs 10.11.1(latest version), and vite 3.1.4. I'm not sure if it's will be a cause for this issue

This combination may be the culprit, though it might still be indicating an actual problem that is getting swallowed. That said, I tried to reproduce using the provided definition on the current SwaggerUI build locally, as well as on editor-next.swagger.io (which uses swagger-ui-react), but see no error on expansion of an operation or changing of a boolean/enum. As you noted, editor.swagger.io also does not display errors.

Are you able to observe a visual difference in SwaggerUI between actual vs expected, which might not rely on console/devtools?

[cywhale]

Are you able to observe a visual difference in SwaggerUI between actual vs expected, which might not rely on console/devtools?

No difference. In my real app, I can switch serveral sources of API json url, and some of them work well. An API json url with multiple endpoints fails only for those had enum/boolean in parameters, but work well for other endpoints that don't contain enum/boolean. I also think it may due to swagger-ui-react (maybe react-redux? behaviors) in preact/vite environment cause this weird errors. I have used SwggerUIBundle in html to render the same json url and no errors.

[tim-lai]

closed via #8231

[cherepanov]

@cywhale eventually did you have success with preact? i see similar errors on very basic schema

[cywhale]

@cywhale eventually did you have success with preact? i see similar errors on very basic schema

Ya. New release >= v4.15.1 actually solve this problem. I have a test repo
https://github.com/cywhale/test_swagger
but it had updated to v4.15.1, the original proposed problems disappears.