Module parse failed: Unexpected token.

[PatelGautam03]

Q&A (please complete the following information)

• OS: Win 11
• Browser: chrome
• Version: 119.0.6045.106
• Method of installation: npm
• Swagger-UI version: 5.17.14
• Swagger/OpenAPI version: 3.0.2

Content & configuration

Example Swagger/OpenAPI definition:

{
  "openapi": "3.0.2",
  "info": {
    "title": "Dummy API",
    "description": "Test",
    "version": "1.0.0"
  },
  "servers": [
    {
      "url": "https://localhost:44352",
      "description": "Test API"
    }
  ],
  "tags": [
    {
      "name": "Books"
    }
  ],
  "consumes": ["application/json"],
  "produces": ["application/json"],
  "paths": {
    "/book/{id}": {
      "get": {
        "tags": ["Books"],
        "description": "It is used to get the specific book data.\n",
        "operationId": "getBook",
        "parameters": [
          {
            "in": "path",
            "name": "id",
            "required": true,
            "schema": {
              "$ref": "#/definitions/bookId"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "It returns the specific book",
            "schema": {
              "$ref": "#/components/schemas/bookIdData"
            }
          },
          "500": {
            "description": "Internal server error"
          }
        },
        "security": [
          {
            "Bearer": []
          }
        ]
      }
    }
  },
  "definitions": {
    "bookId": {
      "type": "integer",
      "minimum": 1,
      "description": "book id",
      "xml": {
        "name": "bookId"
      }
    }
  },
  "components": {
    "schemas": {
      "bookIdData": {
        "type": "object",
        "properties": {
          "id": {
            "type": "integer",
            "format": "int64"
          },
          "book_id": {
            "type": "integer"
          },
          "book_type": {
            "type": "string"
          },
          "name": {
            "type": "string"
          },
          "description": {
            "type": "string"
          },
        },
        "xml": {
          "name": "bookIdData"
        }
      }
    },
    "securitySchemes": {
      "Bearer": {
        "type": "http",
        "scheme": "bearer",
        "bearerFormat": "JWT",
        "description": "JWT Authorization header using the Bearer scheme",
        "name": "Authorization",
        "in": "header"
      }
    }
  }
}

Swagger-UI configuration options:

<SwaggerUI url="/swagger/swagger.json" />

Describe the bug you're encountering

If I use
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "4.3.5",
"swagger-ui-react": "^5.17.14",
this versions then getting the error like this

./node_modules/swagger-ui-react/index.mjs 49:36
Module parse failed: Unexpected token (49:36)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | }) => {
  | const [system, setSystem] = useState(null);

const SwaggerUIComponent = system?.getComponent("App", "root");
| const prevSpec = usePrevious(spec);
| const prevUrl = usePrevious(url);

If I use
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"swagger-ui-react": "^5.17.14",
then not getting any error. It works fine.

Here is my package.json file when getting error.

{
  "name": "main-bt5",
  "version": "0.1.0",
  "homepage": "/",
  "private": true,
  "engines": {
    "node": "<=14.19.1"
  },
  "dependencies": {
    "@atlaskit/tooltip": "^18.0.0",
    "@azure/msal-browser": "2.14.2",
    "@azure/msal-react": "1.0.0",
    "@blueprintjs/core": "^3.52.0",
    "@casl/ability": "^5.4.3",
    "@casl/react": "^2.3.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.2.8",
    "@reduxjs/toolkit": "^1.6.2",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-bootstrap-table": "^4.3.9",
    "@types/react-grid-layout": "^1.3.2",
    "@types/react-router-dom": "^5.1.8",
    "@types/swagger-ui-react": "^4.18.3",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "apexcharts": "^3.29.0",
    "axios": "^0.24.0",
    "axios-cache-adapter": "^2.7.3",
    "axios-mock-adapter": "^1.20.0",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.0",
    "chart.js": "3.4.1",
    "chartjs-plugin-crosshair": "^1.2.0",
    "chartjs-plugin-zoom": "^1.2.0",
    "chroma-js": "^2.1.2",
    "convert-units": "^2.3.4",
    "draft-js": "^0.11.7",
    "exceljs": "^4.3.0",
    "feather-icons-react": "^0.4.3",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "history": "^5.0.0",
    "html-react-parser": "^3.0.16",
    "jquery": "^3.5.1",
    "json-to-csv-export": "^1.0.2",
    "jsonwebtoken": "^8.5.1",
    "jszip": "^3.8.0",
    "libphonenumber-js": "^1.10.37",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "moment-timezone": "0.5.34",
    "namor": "^1.1.3",
    "node-sass": "^6.0.1",
    "popper.js": "^1.16.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-beautiful-dnd": "^13.1.1",
    "react-big-calendar": "^0.38.1",
    "react-bootstrap": "^1.6.1",
    "react-bootstrap-sweetalert": "5.2.0",
    "react-bootstrap-switch": "^15.5.3",
    "react-bootstrap-table": "4.3.1",
    "react-c3-component": "^2.0.0",
    "react-c3js": "^0.1.20",
    "react-chartjs-2": "3.0.4",
    "react-datetime": "^3.0.4",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-dropzone": "^12.0.4",
    "react-feather": "^2.0.9",
    "react-grid-layout": "^1.3.4",
    "react-hook-form": "^6.15.4",
    "react-iframe": "1.3.0",
    "react-json-view": "^1.21.3",
    "react-jvectormap": "0.0.16",
    "react-perfect-scrollbar": "^1.5.8",
    "react-pro-sidebar": "^0.7.1",
    "react-promise-tracker": "^2.1.0",
    "react-quill": "^2.0.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "react-scroll": "1.8.6",
    "react-select": "5.2.1",
    "react-simple-tree-menu": "^1.1.18",
    "react-stepzilla": "^6.0.2",
    "react-table": "6.11.5",
    "react-table-v6": "^6.8.6",
    "react-tagsinput": "^3.19.0",
    "react-tooltip": "^4.4.2",
    "react-validation": "^3.0.7",
    "reactstrap": "8.9.0",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "simplebar-react": "^2.3.6",
    "styled-components": "^5.3.5",
    "swagger-ui-react": "^5.17.14",
    "sweetalert": "2.1.2",
    "typescript": "4.3.5",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/convert-units": "^2.3.5",
    "@types/react-bootstrap-table": "^4.3.11",
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

To reproduce...

Steps to reproduce the behavior:

1. Use this version of these packages : "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-scripts": "4.0.3",
   "typescript": "4.3.5",
   "swagger-ui-react": "^5.17.14",
2. run the project of react-typescript.
3. See error

Expected behavior

I want to use swagger-ui in My project so user can test the apis.

Screenshots

Additional context or thoughts