shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
74.29k stars 4.59k forks source link

[bug]: react-remove-scroll not imported correctly from scrolling elements #4578

Open PineaFan opened 2 months ago

PineaFan commented 2 months ago

Describe the bug

When trying to use any element with a scroll bar (dropdown, sheet, drawer, etc.) the same error is shown relating to react-remove-scroll

Affected component/components

Dropdown, Sheet, Drawer

How to reproduce

(As the issue happens with the built-in example from the website, codesandbox is omitted)

Codesandbox/StackBlitz link

No response

Logs

The following error is shown every tine an element with a scrollbar is used:

Error: Cannot find package 'C:\Users\Name\Company\Documents\Code\granite-ui\node_modules\.pnpm\@radix-ui+react-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\react-remove-scroll\dist\es5\index.js' imported from C:\Users\Name\Company\Documents\Code\granite-ui\node_modules\.pnpm\@radix-ui+react-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\@radix-ui\react-menu\dist\index.mjs
Did you mean to import "react-remove-scroll/dist/es5/index.js"?

### System Info

```bash
OS Name / Microsoft Windows 10 Pro
Version / 10.0.19045 Build 19045
Chrome Version / 127.0.6533.100 (Official Build) (64-bit) (cohort: Stable) 
Package.json: 
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    ...
    "next": "14.2.5",
    "njwt": "^2.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-remove-scroll": "^2.5.10"
  }

Before submitting

PineaFan commented 2 months ago

I've confirmed that by modifying the single file in the error, the program builds correctly. Edits:

File: .\node_modules\.pnpm\@radix-ui+react-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\@radix-ui\react-menu\dist\index.mjs
Line 24:
- import { RemoveScroll } from "react-remove-scroll";
+ // import { RemoveScroll } from "react-remove-scroll";
Line 196:
- const ScrollLockWrapper = disableOutsideScroll ? RemoveScroll : React.Fragment;
+ const ScrollLockWrapper = disableOutsideScroll ? React.Fragment : React.Fragment;

Of course, this does remove the functionality, but it confirmed that this is the only file causing the error.

PineaFan commented 2 months ago

After further testing, this issue happens with pnpm, and is fixed by switching to yarn (Due to errors happening from within node_modules/.pnpm)