TypeError: Cannot read properties of undefined (reading 'match')

[EduardoMendes418]

Error loading content from the uploaded file. Detail is that the content of the file is read in the frontend, below the source code and screenshot of the error

Q&A (please complete the following information)

• OS: Linux
• Browser: Firefox
• Version: 106.0.5
• Method of installation: npm
• Swagger-UI version: 4.14.2
• Swagger/OpenAPI version: OpenAPI 3.0

Screenshots

Content & configuration

Source code example:

import { useState } from "react";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";
function App() {
  const [file, setFile] = useState();
  const handleChange = (e) => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = (e) => {
      setFile(e.target.result);
    };
  };
  return (
    <div>
      <h2>Error Swagger Console</h2>
      <input type="file" onChange={handleChange} />
      {file && <SwaggerUI spec={file} />}
    </div>
  );
}
export default App;

[ershisan99]

Any updates on this one?

[yingxinj]

I had the same problem and have found a workaround.

My guess is that this line of code in swagger-ui is throwing the error because "url" is undefined.

let url = state.get("url")
let matchResult = url.match(/^([a-z][a-z0-9+\-.]*):/)

So to workaround the issue, I tried passing in an empty string as the url attribute:

      <SwaggerUI spec={file} url="" />

It seems to work OK and the console errors are no longer appearing. Swagger-ui docs recommend (here) not to pass in both spec and url so I don't know if there is something else that might break, that I haven't noticed yet. I would be interested to hear if this workaround is also effective for others!

[Ritik-Banger-Biz4group]

Any update on the solution?

[k-funk]

<SwaggerUI spec={file} url="" /> worked for me. No difference in my output that I can tell. 🤷

[Ritik-Banger-Biz4group]

url="" is a workaround on the problem. Is there any solution from the maintainers.