Upgrading swagger-ui-react from version 4.xx.xx to 5.xx.xx resulted in the error: Cannot find module '#swagger-ui'.

[cxzhmna]

I encountered a vulnerability in swagger-ui-react, which required upgrading the package from version 4.16.1 to 5.17.12. However, during the UI build process, the compilation failed, and the following error was displayed:

./node_modules/swagger-ui-react/index.mjs
Cannot find module: '#swagger-ui'. Make sure this package is installed.

To troubleshoot, I tried deleting the /node_modules directory and reinstalling dependencies, but the issue persists.

OS: IOS
Browser: N/A
react: 17.0.2
node: 16
Swagger-UI version: 5.xx.xx (swagger-ui-react)

package.json

{
  "name": "web-app",
  "version": "1.0.0",
  "engines": {
    "node": "16"
  },
  "private": true,
  "dependencies": {
    "@emotion/core": "10.3.0",
    "@emotion/styled": "10.3.0",
    "@itential/rodeo-icons": "1.7.0",
    "@itential/rodeo-ui": "21.33.7-2022.1.230",
    "ajv": "6.12.6",
    "axios": "1.6.1",
    "better-ajv-errors": "0.8.2",
    "formik": "2.2.9",
    "lodash-es": "4.17.21",
    "primereact": "6.3.2",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-app-rewired": "2.2.1",
    "react-dom": "17.0.2",
    "react-router": "5.3.4",
    "react-router-dom": "5.3.4",
    "react-transition-group": "4.4.5",
    "swagger-ui-react": "5.17.12",
    "yup": "0.30.0"
  },
  "peerDependencies": {
    "@itential/ace-builds": "^1.6.2",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "start:https": "HTTPS=true react-app-rewired start",
    "build": "react-app-rewired build",
    "lint": "eslint --fix ./src/**/*.js",
    "play": "./node_modules/.bin/cypress run --headed --config-file cypress-local.json --spec test/local/test/**/*.local.test.js",
    "test:local:report:clean": "rm -rf report/local/results",
    "test:local:report:generate": "marge report/local/results/index.json -o report/local/results",
    "test:local:report:merge": "mochawesome-merge --reportDir report/local/results/*.json -o report/local/results/index.json",
    "test:func": "npm run test:func:headed",
    "test:func:dev": "./node_modules/.bin/cypress open --config-file cypress.json",
    "test:func:headed": "npm run test:func:report:clean && ./node_modules/.bin/cypress run --browser chromium --config-file cypress.json --headed && npm run test:func:report:merge && npm run test:func:report:generate",
    "test:func:headless": "npm run test:func:report:clean && ./node_modules/.bin/cypress run --browser chromium --config-file cypress.json --headless && npm run test:func:report:merge && npm run test:func:report:generate",
    "test:func:headless:single": "npm run test:func:report:clean && ./node_modules/.bin/cypress run --browser chromium --headless --config-file cypress.json --spec 'test/functional/test/**/config.*.func.test.js'",
    "test:func:pipeline": "npm run test:func:report:clean && ./node_modules/.bin/cypress run --browser chromium --headless --config-file cypress.json --spec 'test/functional/test/**/*.func.test.js'",
    "test:func:pipeline:report": "npm run test:func:report:merge && npm run test:func:report:generate",
    "test:func:report:clean": "rm -rf .ci/test/functional/results && rm -rf .ci/test/functional/screenshots",
    "test:func:report:merge": "mochawesome-merge .ci/test/functional/results/*.json -o .ci/test/functional/results/index.json",
    "test:func:report:generate": "marge .ci/test/functional/results/index.json -o .ci/test/functional/results/index.html",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8083/",
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-expressions": 0,
      "no-restricted-globals": 0,
      "indent": [
        "error",
        4
      ]
    }
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  },
  "browserslist": [
    ">0.2%",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@itential/ace-builds": "^1.6.2",
    "@babel/code-frame": "7.18.6",
    "@babel/highlight": "7.18.6",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
    "@typescript-eslint/eslint-plugin": "2.34.0",
    "@typescript-eslint/parser": "2.34.0",
    "babel-eslint": "10.1.0",
    "babel-runtime": "6.26.0",
    "cypress": "9.7.0",
    "eslint-config-react-app": "5.2.1",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "eslint-plugin-react": "7.19.0",
    "jest": "24.9.0",
    "mochawesome-merge": "4.2.2",
    "mochawesome-report-generator": "6.2.0",
    "mochawesome": "7.1.3",
    "prettier": "1.19.1",
    "react-scripts": "3.4.4"
  },
  "overrides": {
    "semver@<5.7.1": "5.7.2",
    "axios@<1.6.0": "1.6.1"
  }
}

[GabenGar]

Use a proper bundler, react-app-rewired didn't receive updates for 3 years so unlikely it will be up to date with latest ESM stuff.