Vite is unable to detect ESM import of internal package in monorepo

[pavinduLakshan]

Hi everyone,

I have a monorepo using Nx and PNPM, where I've initialized a new React app named dashboard under the /apps directory using Vite.

I'm trying to use an internal module, @wso2is/react-components, in the dashboard app. However, Vite fails to detect the ESM import.

Steps to Reproduce

The issue can be reproduced with the following steps:

1. Clone the repository: identity-apps/tree/vite_repro.
2. Run pnpm install from the root of the monorepo.
3. Build the project using pnpm build.
4. Observe that the dashboard app build fails.

Error Log

error during build: [vite]: Rollup failed to resolve import "@wso2is/react-components" from   
"/Users/pavindu/Work/identity-apps/modules/react-components/dist/index.esm.js".   
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 viteWarn (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:50994:17)   
at onwarn (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vitejs/plugin-react/dist/index.mjs:282:9) at onRollupWarning (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:51024:5)   
at onwarn (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:50692:7) at file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19423:13 at Object.logger [as onLog] (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:21149:9) at ModuleLoader.handleInvalidResolvedId (file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20038:26) at file:///Users/pavindu/Work/identity-apps/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19996:26  ELIFECYCLE  Command failed with exit code 1.

As the error instructed, I tried adding the package to build.rollupOptions.external in vite config, but that too didn't resolve the issue.

Any guidance or suggestions on resolving this issue would be greatly appreciated.

[ArnaudBarre]

The error seems to be that the build output of react-components contains a import to itself, which rollup prevent. Check the build output of the react-components package to get more insights

[pavinduLakshan]

Thanks, that was the issue.