Cannot read property 'slice' of undefined

[Hackniu]

Q&A (please complete the following information)

• OS: [e.g. macOS]
• Browser: [e.g. chrome, safari]
• Version: [e.g. 22]
• Method of installation: [e.g. npm, dist assets]
• Swagger-UI version: [e.g. 3.10.0]
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

Example Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
  // your config options here
})

?yourQueryStringConfig

Describe the bug you're encountering

To reproduce...

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Screenshots

Additional context or thoughts

I am using:
{
"swagger-ui": "^3.5.0",
"react": "^16.4.1"
}

const React = require('react');
const SwaggerUI = require('swagger-ui');

class Swagger extends React.Component {
componentDidMount() {
SwaggerUI({
dom_id: "#ui",
url: "http://petstore.swagger.io/v2/swagger.json"
});
}

  render() {
     return <div id="ui" />;
  }

}
error: TypeError: Cannot read property 'slice' of undefined
the error is coming from swagger-ui, I try to comment out the componenentDidMount, and only leave the const SwaggerUI = require('swagger-ui'), the error is still there. Please anyone know how to solve the problem, thx

[shockey]

Hey @Hackniu! Thanks for the report.

Quoting myself in #4745 (comment):

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 😄

[Hackniu]

I use the snippet code from #4745 and replace url with http://xxx/xxx/swagger-apis, it shows "no API definition found". below is the swagger-apis information, please do you know if I miss anything. thx

{
"swagger": "2.0",
"info": {
"description": "Api Documentation",
"version": "1.0",
"title": "Api Documentation",
"termsOfService": "urn:tos",
"contact": {},
"license": {
"name": "Apache 2.0",
"url": "http://www.apache.org/licenses/LICENSE-2.0"
}
},

[Hackniu]

I use oauth2 authentication token for both ui and service. Since my swagger page is under the my main api, so it should append the token automatically, but in the SwaggerUIBundle, does it append the token automatically also?

[Hackniu]

Is there a way to pass json file directly to SwaggerUIBundle instead of url

[shockey]

Is there a way to pass json file directly to SwaggerUIBundle instead of url

You can pass a JS object to Swagger UI by using the spec option.

[shockey]

Fixed!

We've just released swagger-ui-react, which declares React as a peer dependency.