"Unable to render this definition" error solutions not working

[celinehaddad]

Q&A

• OS: macOS
• Browser: chrome
• Version: chrome version 112.0.5615.137
• Method of installation: yarn
• Swagger-UI version: swagger-ui-react": "^4.18.2
• Swagger/OpenAPI version: OpenAPI 3.0.2

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.2
info:
  title: 

Describe the bug you're encountering

I'm running into an issue while implementing swagger-ui-react in my Next.js app. I found this issue thread #8245 to solve my initial error message ("SyntaxError: Cannot use import statement outside a module") but I tried this solution and I get this error:

I also noticed that when I change the spec file (was testing json and yml formats if it would behave differently- it doesn't), the spec file didn't change from json to yml based on what I specified..it just kept the first file I tried & I verified this in my console.log. SO, I tried a different solution I found in that issue thread to dynamically import swagger-ui-react, and that solved the "spec file not changing to what I define" issue. But, I still get the same exact error message as pictured above.

My spec file specifies "openapi": "3.0.2" at the top. I tested changing it to "3.0.1" & tested adding "swagger": "2.0" above the openapi version as well, but none of this worked & I still get that error message. I tested this out at https://editor.swagger.io/ & the UI of my openapi spec file renders perfectly.

Not sure what I need to do to get this working as my openapi spec meets the requirements of the error message. Any ideas?

[char0n]

Hi @celinehaddad,

Here is an example how to utilize swagger-ui-react: https://github.com/swagger-api/swagger-editor/blob/next/src/App.jsx

SwaggerUI component accepts spec prop which is of type object, or url prop which represents URL.

Utilizing spec prop:

import YAML from 'js-yaml';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

const spec = YAML.load(`
openapi: 3.0.2
info:
  title: 
`);

// pseudo react code
<SwaggerUI spec={spec} />

NOTE: notice that spec represents already parsed JavaScript Object, and not OpenAPI definition represented as string. I think that's why you're seeing the issue.

Utilizing spec prop:

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

const url = "https://gist.githubusercontent.com/char0n/5bf90bfcd85b7355a9ca467f321fd40c/raw/42e0fdd96d991e3c8060d5d8f3e3f5862871a2bc/incomplete-options.yaml";

// pseudo react code
<SwaggerUI url={url} />

---

Please let me know if this helped.

[char0n]

Assuming my previous comment helped. Closing for now. Re-open if my assumption was incorrect.