vite cannot import react component from a workspace package

Describe the bug

I am trying to import a Button component from a workspace package shared-ui from a vite react app but i am getting 'Button' is not exported by ../shared-ui/dist/index.js, imported by src/App.tsx error.

Reproduction

https://github.com/unworthyEnzyme/react-monorepo

Steps to reproduce

To reproduce clone this repository and npm install and then run npx nx build my-vite-app. I thought maybe i was doing something wrong and created a react app with create-react-app and if you npx nx build my-app you can see there are no errors.

System Info

Windows 10 
Node v18.0
npm 8.6.0

Used Package Manager

npm

Logs

‘Button’ is not exported by …/shared-ui/dist/index.js, imported by src/App.tsx file: C:/Users/asus/Desktop/package-based/packages/my-vite-app/src/App.tsx:1:9 1: import { Button } from ‘shared-ui’; ^ 2: function App() { 3: return ( error during build: Error: ‘Button’ is not exported by …/shared-ui/dist/index.js, imported by src/App.tsx at error (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:1858:30) at Module.error (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:12429:16) at Module.traceVariable (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:12788:29) at ModuleScope.findVariable (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:11440:39) at FunctionScope.findVariable (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:6372:38) at ChildScope.findVariable (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:6372:38) at Identifier.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:7439:40) at CallExpression.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5265:73) at CallExpression.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:8935:15) at Property.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5269:23) at ObjectExpression.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5265:73) at CallExpression.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5265:73) at CallExpression.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:8935:15) at ReturnStatement.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5269:23) at BlockStatement.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5265:73) at FunctionDeclaration.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5269:23) at Program.bind (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:5265:73) at Module.bindReferences (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:12425:18) at Graph.sortModules (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:23062:20) at Graph.build (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:22940:14) at async file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:23730:13 at async rollupInternal (file:///C:/Users/asus/Desktop/package-based/node_modules/rollup/dist/es/shared/rollup.js:23727:5) at async doBuild (file:///C:/Users/asus/Desktop/package-based/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:45395:24) at async build (file:///C:/Users/asus/Desktop/package-based/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:45233:16) at async CAC.<anonymous> (file:///C:/Users/asus/Desktop/package-based/node_modules/vite/dist/node/cli.js:756:9)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

When you import 'shared-ui', Vite needs to resolve shared-ui to an actual file in your file system to load it. If that path doesn’t include the /node_modules/ string, it’s a linked package, e.g. /Users/bjorn/projects/my-linked-dep/index.js.

When using a monorepo that links packages up, you get a path like above so Vite can know it’s a linked dep. About realpath, you can check out the nodejs docs. Because linking creates a symlink, you could be initially referring to /Users/bjorn/projects/my-project/node_modules/my-linked-dep/index.js. Calling realpath returns the actual file which is /Users/bjorn/projects/my-linked-dep/index.js.

[JUNNNI]

Understood! Thanks for the clarification