Passing JSON object to spec results in error

[pratikthanki]

Hi

When looking to use RedocStandalone, passing a json object to spec results in incorrect behaviour.

I am using a spec from: https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/api-with-examples.json

ReDoc Version: 2.0.0-rc.45 npm --version: 6.14.8

Expected Output

Provide either:

• json object to spec
• or path/ url to specUrl

Should result in the docs being displayed.

Current Output

I get the following error:

Document must be valid OpenAPI 3.0.0 definition
Stack trace
Error: Document must be valid OpenAPI 3.0.0 definition
    at OpenAPIParser.validate (http://localhost:3000/static/js/0.chunk.js:101908:19)
    at new OpenAPIParser (http://localhost:3000/static/js/0.chunk.js:101895:16)
    at new SpecStore (http://localhost:3000/static/js/0.chunk.js:102219:25)
    at new AppStore (http://localhost:3000/static/js/0.chunk.js:105287:23)
    at StoreBuilder.makeStore (http://localhost:3000/static/js/0.chunk.js:103097:20)
    at StoreBuilder.render (http://localhost:3000/static/js/0.chunk.js:103183:25)
    at finishClassComponent (http://localhost:3000/static/js/0.chunk.js:71760:35)
    at updateClassComponent (http://localhost:3000/static/js/0.chunk.js:71713:28)
    at beginWork (http://localhost:3000/static/js/0.chunk.js:73298:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:58263:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:58312:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:58372:35)
    at beginWork$1 (http://localhost:3000/static/js/0.chunk.js:78114:11)
    at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:76950:16)
    at workLoopSync (http://localhost:3000/static/js/0.chunk.js:76887:9)
    at renderRootSync (http://localhost:3000/static/js/0.chunk.js:76853:11)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:76470:22)
    at http://localhost:3000/static/js/0.chunk.js:65723:30
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:109251:16)
    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:65669:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:65718:13)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:65706:7)
    at scheduleUpdateOnFiber (http://localhost:3000/static/js/0.chunk.js:76070:13)
    at Object.enqueueSetState (http://localhost:3000/static/js/0.chunk.js:66846:9)
    at StoreBuilder.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3000/static/js/0.chunk.js:86153:20)
    at StoreBuilder.<anonymous> (http://localhost:3000/static/js/0.chunk.js:103139:24)
    at step (http://localhost:3000/static/js/0.chunk.js:107933:17)
    at Object.next (http://localhost:3000/static/js/0.chunk.js:107864:14)
    at fulfilled (http://localhost:3000/static/js/0.chunk.js:107819:24)

Interestingly, passing the url to either spec or specUrl it works.

The way I am downloading the json:

  async function getJson(url) {
    const resp = await fetch(url);
    const json = await resp.json();

    if (resp.status !== 200) {
      throw Error(resp.message)
    };

    return json;
  }

When I console.log the output looks correct:

Any thoughts on this are appreciated - thanks!

[aabdaab]

I'm running into a similar issue but I get this error when I pass a json object into a spec prop:

[pratikthanki]

Ah interesting, I think I have read/come across this. Does your swagger spec reference another spec by any chance?

If so, you will need to consolidate them, you can use speccy (for example) to do this: https://github.com/wework/speccy

[RomanHotsiy]

@pratikthanki could you share a code snippet on how you pass the loaded spec to RedocStandalone?

[pratikthanki]

Yeah sure @RomanHotsiy, the getJson function is in another file (described above).

The swagger spec I am using is here: https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/api-with-examples.json

When I pass it to specUrl it works perfectly.

class App extends Component {
    state = {
        data: {}
    }

    componentDidMount() {
        getJson(url)
            .then(response => {
                this.setState({
                    data: response
                });
            });
    }

    render() {
        return (
            <div className="App">
                <RedocStandalone
                    spec={response}
                    options={{
                        nativeScrollbars: true,
                        disableSearch: false,
                        hideDownloadButton: true,
                        sortPropsAlphabetically: true,
                        pathInMiddlePanel: true,
                        theme: { colors: { primary: { main: '#61affe' } } },
                    }}
                />
            </div>
        );
    }
}

export default App;