-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Error: Could not find the module ".../packages/ui/src/select/select.tsx#Select#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler. #58776
Comments
Have you found a solution? To reproduceI'm building a component on top of Radix-ui. import * as SelectPrimitive from "@radix-ui/react-select";
// ...
export {
Select,
SelectValue,
SelectTrigger,
SelectContent,
SelectItem,
}; The error occurs when I export the Error: Could not find the module "<path>\select.tsx#SelectPrimitive#Select" in the React Client Manifest.
This is probably a bug in the React Server Components bundler. |
@A7med3bdulBaset, the temporary solution I've found involves wrapping my UI library components, which can be accessed through dot notation from a parent component, inside a 'use client' component inside my app. For some reason, it doesn't recognize imported components from my library as client components, even if i have specified it, and so it throws the error mentioned earlier. Previously, I had this setup: page.tsx const Page = () => {
return (
<div className='flex flex-col'>
<Select size="md">
<Select.Item value="apple">Apple</Select.Item>
</Select>
</div>
);
} This was causing the error. Now, I've changed it to: foo.tsx "use client"
import { Select } from 'ui/src/select'
export const Foo = () => {
return (
<Select size="md">
<Select.Item value="apple">Apple</Select.Item>
</Select>
);
} page.tsx const Page = () => {
return (
<div className='flex flex-col'>
<Foo />
</div>
);
} This new setup works. For the time being, I will stick with this workaround until a fix is implemented. |
Thanks for the workarround @scerelli, I was having the same problem when trying to use an enum from my UI component in a page to pass as a prop. When I added a "use client" at the top of my page, it worked, but putting the enum in a separate file without the "use client" did the job too. I think this problem may occur every time we try to access any value from a client-side component in a server-side component using dot notation. (This is just a hypothesis; I haven't tested it yet). |
Here's another repro example that aligns with the dot notation issue (but for a separate library): https://codesandbox.io/p/devbox/next-xstate-repro-stable-6828dx The issue is also present on the canary version (had to use --force due to mismatched React versions): https://codesandbox.io/p/devbox/next-xstate-repro-canary-pxkqpy |
Having the same issue. @scerelli's fix works fine. Seems like server components don't resolve any dotted components. All of these examples throw the same error. // ~/components/client
'use client'
export function Tabs(props) { return null; }
Tabs.Buttons = props => null;
export const Tabs = props => null;
Tabs.Buttons = props => null;
export namespace Tabs {
export const Root = props => null;
export const Buttons = props => null;
} |
I experienced a very similar issue when trying to import an enum from a client component. Not sure if this is really the same issue tho |
Also happens if you try to use |
Link to the code that reproduces this issue
https://github.com/scerelli/dot-component-bug-next
To Reproduce
example:
Current vs. Expected behavior
I expect it to load correctly
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000 Binaries: Node: 18.16.0 npm: 9.5.1 Yarn: 1.22.19 pnpm: 8.10.5 Relevant Packages: next: 14.0.3 eslint-config-next: 13.4.7 react: 18.2.0 react-dom: 18.2.0 typescript: 5.1.6 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Not sure
Additional context
No response
The text was updated successfully, but these errors were encountered: