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

[p1l3]

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;

[yingxinj]

Duplicate of #8273 - please see my comment on that issue for a potential workaround.

[Mathias02]

I am actually using Swagger-ui version 5.20.1 and do not experience this kind of issues. However, I would suggest that you close this issue since this is related to the old version of Swagger-UI version 4.14.2.