Getting: Tried to resolve a relative URL, without having a basePath

Q&A (please complete the following information)

• OS: macOS Big Sur v11.6.1 (20G224)
• Browser: Google Chrome
• Version: Chrome Version 96.0.4664.110
• Method of installation: npm
• Swagger-UI version: 4.1.3
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Repro repo

Example Swagger/OpenAPI definition:

openapi: "3.0.0"
info:
  version: "1.0.0"
  title: "Sample project"
  description: "My sample API"
servers:
  - url: "http://localhost:8080"
paths:
  /demo:
    get:
      summary: "Just a demo path"
      responses:
        401:
          description: "Unauthorized"
        200:
          description: "OK"
  /clients:
    $ref: "clients.yaml#/paths/~1clients/get"
  /users:
    $ref: "users.yaml#/paths/~1users/get"

Swagger-UI configuration options:

const spec = require("./swagger-config.yaml");

const ui = SwaggerUI({
  spec,
  urls: [
    { url: "./clients.yaml", name: "Clients" },
    { url: "./users.yaml", name: "Users" },
  ],
  deepLinking: true,
  dom_id: "#swagger",
});

Describe the bug you're encountering

When I do npm start, I get the error

Resolver error at paths./clients.$ref
Could not resolve reference: Tried to resolve a relative URL, without having a basePath. path: 'clients.yaml' basePath: 'undefined'

and the same for the users file.

Also, when I build (npm run build), the content of the files is not included in the build.

I think this is an issue with swagger-ui and not my syntax of openapi, because:

1. My openapi VS code extension recognizes the path as valid, and I can jump in the file etc
2. The openapi-typescript package I use to generate typescript files out of my openapi file works, and I get my users and clients content in the result.

To reproduce...

Steps to reproduce the behavior:

1. Clone the Repro repo
2. npm install
3. npm start
4. Go to http://localhost:8080/
5. See the error
6. Verify that openapi is valid either by opening the project in vscode, or run npx openapi-typescript src/swagger-config.yaml in the root of the project and see the result.

Expected behavior

I should see my referenced files in the Swagger UI result.

linking this past issue here

My workaround is to first combine all the yaml files into a single one, and just use that for the build/serve.

Clone the linked sample-swaggerui-openapi repository, install its dependencies, and reproduce the issue with npm start and npm run build. Trace how the referenced clients.yaml and users.yaml files are resolved when basePath is undefined, then verify that both references render in Swagger UI and are included in the build.