Webpack "Failed to fetch" issue

[afzalIbnSH]

With the below basic presets config,

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],

    [
      'redocusaurus',
      {
        specs: [{
          route: '/api-reference/',
          spec: 'http://localhost:3001/openapi-spec.json',
        }],
        theme: {
          primaryColor: '#1890ff',
        },
      }
    ]
  ],

when I visit the /api-reference route, I get the below error message instead of the openapi spec

Something went wrong...
Failed to fetch
Stack trace
Error: Failed to fetch
    at BaseResolver.eval (webpack-internal:///./node_modules/@redocly/openapi-core/lib/resolve.js:123:23)
    at Generator.throw (<anonymous>)
    at rejected (webpack-internal:///./node_modules/@redocly/openapi-core/lib/resolve.js:6:65)

ReDoc Version: 2.0.0
Commit: 5fb4daa

My dependencies;

    "@docusaurus/core": "2.4.1",
    "@docusaurus/preset-classic": "2.4.1",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "redocusaurus": "^1.6.3"

[rohit-gohri]

Is the openapi spec available at http://localhost:3001/openapi-spec.json' ? It seems like the url can't be loaded

[afzalIbnSH]

oh it is. I mean locally ofcourse. It returns

{"openapi":"3.0.0","paths":{"/v1/design/image-upload":{"post":{"operationId":"DesignController_uploadImage","parameters":[],"requestBody":{"required":true,"description":"Image of the product to be included in the design","content":{"multipart/form-data":{"schema":{"$ref":"#/components/schemas/ImageUploadDto"}}}},"responses":{"200":{"description":"id of the design instance, to be used in subsequent calls","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ImageUploadResDto"}}}}},"tags":["daas"]}},"/v1/design/suggest":{"post":{"operationId":"DesignController_suggestTemplates","parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/SuggestDto"}}}},"responses":{"200":{"description":"Upload image to start the design flow","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ImageUploadResDto"}}}}},"tags":["daas"]}},"/v1/design/preview.webp":{"get":{"operationId":"DesignController_renderPreview","parameters":[{"name":"id","required":true,"in":"query","schema":{"type":"string"}},{"name":"recipeId","required":true,"in":"query","schema":{"type":"string"}},{"name":"variant","required":true,"in":"query","schema":{"type":"string"}},{"name":"title","required":true,"in":"query","schema":{"type":"string"}},{"name":"subtitle","required":true,"in":"query","schema":{"type":"string"}},{"name":"ctaText","required":true,"in":"query","schema":{"type":"string"}},{"name":"offerText","required":true,"in":"query","schema":{"type":"string"}},{"name":"logoURL","required":true,"in":"query","schema":{"type":"string"}}],"responses":{"200":{"description":""}},"tags":["daas"]}},"/v1/design/generated.jpeg":{"get":{"operationId":"DesignController_renderFullVersion","parameters":[{"name":"id","required":true,"in":"query","schema":{"type":"string"}},{"name":"recipeId","required":true,"in":"query","schema":{"type":"string"}},{"name":"variant","required":true,"in":"query","schema":{"type":"string"}},{"name":"title","required":true,"in":"query","schema":{"type":"string"}},{"name":"subtitle","required":true,"in":"query","schema":{"type":"string"}},{"name":"ctaText","required":true,"in":"query","schema":{"type":"string"}},{"name":"offerText","required":true,"in":"query","schema":{"type":"string"}},{"name":"logoURL","required":true,"in":"query","schema":{"type":"string"}}],"responses":{"200":{"description":""}},"tags":["daas"]}}},"info":{"title":"Design as a Service API","description":"Blend's design suggestion and creation APIs.","version":"1","contact":{}},"tags":[{"name":"daas","description":""}],"servers":[],"components":{"schemas":{"ImageUploadDto":{"type":"object","properties":{"file":{"type":"string","format":"binary"}},"required":["file"]},"ImageUploadResDto":{"type":"object","properties":{"id":{"type":"string","description":"The id of the design instance"}},"required":["id"]},"SuggestDto":{"type":"object","properties":{"id":{"type":"string"},"recipePreset":{"type":"string"}},"required":["id","recipePreset"]}}}}

[afzalIbnSH]

Just deployed the spec. You can try with https://daas.blend-api.com/openapi-spec.json. Same result.

[rohit-gohri]

Weird, will test

[afzalIbnSH]

Hi @rohit-gohri Thank you so much for looking into this. Any update? Were you able to reproduce this?

[afzalIbnSH]

Update @rohit-gohri. You may have already realized, but the problem occurs only with a URL as spec. Works if it's a path to a file.

[jwitz]

I'm also experiencing this issue happening in Redocusaurus v2.0.0/ Docusaurus v3. Local file works while external URL does not.

Weirdly though wasn't affected in Docusaurus v2, external links worked fine before my upgrade attempt. Did you have any luck with this @afzalIbnSH ?

Failed to fetch
Stack trace
Error: Failed to fetch
    at BaseResolver.eval (webpack-internal:///./node_modules/redoc/node_modules/@redocly/openapi-core/lib/resolve.js:123:23)
    at Generator.throw (<anonymous>)
    at rejected (webpack-internal:///./node_modules/redoc/node_modules/@redocly/openapi-core/lib/resolve.js:6:65)

ReDoc Version: 2.1.3
Commit: b2d8e0f

[brettgoss]

Was anyone able to figure this out? I'm encountering this exact issue on a completely fresh Docusaurus project using Docusaurus 3.2.1 and redocusaurus 2.0.2.

Local specs work just fine, but trying to load either a json or yaml remote spec errors with the above Failed to fetch message.

Edit: After some deeper investigation, this seems to be caused by a CORS issue. Allowing CORS on the spec allowed it to load remotely.