OpenApiTryIt component shows "Incorrect definitionId" error

[timothymcmackin]

I forked this starter and tried to use the OpenApiTryIt MDX component as described in these docs:
https://redocly.com/docs/developer-portal/guides/step-by-step/

I added the catFacts API in the siteConfig.yaml file:

oasDefinitions:
  catFacts: https://catfact.ninja/docs/api-docs.json

Then I created this page in a file named developer-portal/openapi-try-it.mdx:

import { OpenApiTryIt, Alert, ExplainStep, scrollToHeading } from '@redocly/developer-portal/ui';

# Testing the openapi try it component

<OpenApiTryIt
  definitionId="catFacts"
  operationId="getRandomFact"
  id="step-1"
  onResponse={({ response }) => {
    console.log(response);
  }}
/>

When I run the portal locally and go to http://localhost:3000/developer-portal/openapi-try-it/ , I see an error that says Incorrect definitionId: "catFacts". What am I doing wrong? I've also tried downloading the openapi file and linking to it locally instead of putting the link in oasDefinitions.

Here's my minimal reproduction:
https://github.com/timothymcmackin/redocly-openapi-try-it

[nalesnichok]

Hi @timothymcmackin,

Thank you for contacting us.

You need to integrate the Reference docs into the Developer portal in order for the OpenApiTryIt component to work as expected:

https://redocly.com/docs/developer-portal/guides/reference-docs-integration/#step-2-add-pages-that-reference-the-definitions

1. Create a file catfacts.page.yaml (for example) in your Developer portal with the following content:

type: reference-docs
definitionId: catFacts
settings:
  generateCodeSamples:
    languages:
      - lang: curl
      - lang: JavaScript
      - lang: Node.js

2. Run yarn clean
3. Run yarn start

Let us know whether it resolved your problem.

[timothymcmackin]

Thanks @nalesnichok, that fixed the problem. It would be good to add that prerequisite here:
https://redocly.com/docs/developer-portal/guides/step-by-step/#prerequisites

[timothymcmackin]

Another note for people in the future who may find this item: One issue I had was that if the openapi file was missing something or had a problem, the dev portal wouldn't load and didn't seem to give me an error So if you're having this problem, make sure that your openapi file has all of the necessary things like a servers object.

[ali-cash]

I have followed the previous steps, Incorrect definitionId popups randomly, sometimes if I run yarn clean and yarn start it starts working again

[ali-cash]

I have found the issue, for some reason if I export a FullWidthLayout in the mdx file, the < OpenApiResponse > element breaks