Rollup failed to resolve import "#swagger-ui" from "node_modules/swagger-ui-react/index.mjs".

[chndrsh29815]

📜 Description

I am using swagger-ui-react library with azure apim developer portal custom widget(react) project. I have just imported 'swagger-ui-library' and used it by importing it one of my component. when i m building it, its throwing error.

My component file where i am using it `import React from 'react'; import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; import { fetchData, getHardcodedSwaggerJson } from '../services/apiService';

interface OasRendererProps { apiProxyName: string; }

const OasRenderer: React.FC = () => {

const swaggerJson = getHardcodedSwaggerJson(); return ; };

export default OasRenderer;`

package.json file { "name": "cw-oas-renderer", "private": true, "version": "0.1.0", "scripts": { "start": "vite", "host": "vite --host", "preview": "vite preview", "build": "tsc && vite build", "deploy": "npm run build && node deploy.js" }, "dependencies": { "@azure/api-management-custom-widgets-tools": "^1.0.0-beta.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.3", "swagger-ui-react": "^5.17.2" }, "devDependencies": { "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@types/swagger-ui-react": "^4.18.3", "@vitejs/plugin-react": "^2.0.1", "prettier": "^2.7.1", "sass": "^1.54.4", "typescript": "^4.7.4", "vite": "^3.0.7" } }

Expected behavior

It should build with azure apim developer portal custom widget project

Actual Behavior with Screenshots

It actually throws error

[vite]: Rollup failed to resolve import "#swagger-ui" from "node_modules/swagger-ui-react/index.mjs". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external error during build: Error: [vite]: Rollup failed to resolve import "#swagger-ui" from "node_modules/swagger-ui-react/index.mjs".
This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external at onRollupWarning (file:///C:/Workspace/React-2/azure-api-management-widgets/azure-api-management-widget-cw-oas-renderer/node_modules/vite/dist/node/chunks/dep-372dab03.js:45909:19) at onwarn (file:///C:/Workspace/React-2/azure-api-management-widgets/azure-api-management-widget-cw-oas-renderer/node_modules/vite/dist/node/chunks/dep-372dab03.js:45680:13) at Object.onwarn (file:///C:/Workspace/React-2/azure-api-management-widgets/azure-api-management-widget-cw-oas-renderer/node_modules/rollup/dist/es/shared/rollup.js:23263:13) at ModuleLoader.handleResolveId (file:///C:/Workspace/React-2/azure-api-management-widgets/azure-api-management-widget-cw-oas-renderer/node_modules/rollup/dist/es/shared/rollup.js:22158:26) at file:///C:/Workspace/React-2/azure-api-management-widgets/azure-api-management-widget-cw-oas-renderer/node_modules/rollup/dist/es/shared/rollup.js:22119:26

Reproduction steps

1. install azure apim developer portal custom widget project.
2. install swagger-ui-library as dependency
3. use this dependency in one of the react component

It seems like the swagger-ui-react library is not compatible with azure apim developer portal custom widget project.