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

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;

Start with the provided React reproduction in App, where the uploaded file is passed to the SwaggerUI spec prop, and trace the file-loading and spec-parsing entry point that produces the match error. Done means the supplied OpenAPI 3.0 file loads in the shown Firefox setup without the TypeError.