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.

[scerelli]

Link to the code that reproduces this issue

https://github.com/scerelli/dot-component-bug-next

To Reproduce

1. Given a client component that exports multiple components accessible via dot notation, like the one you see in the repo attached, next fails to load the components.

example:

<Select>
 <Select.Item>Value</Select.Item>
</Select>

4. Next fails to import it and throws an error

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.

Current vs. Expected behavior

I expect it to load correctly

Verify canary release

• I verified that the issue exists in the latest Next.js 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

[AhmedBaset]

Have you found a solution?

To reproduce

I'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 SelectPrimitive itself then use in a server component.

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.

[scerelli]

@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.

[duxpe]

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).

[nopelluhh]

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

[Ziothh]

Having the same issue.

@scerelli's fix works fine.

Seems like server components don't resolve any dotted components.
Atm you can only use components via dotted notation in files marked with 'use client'.

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;
}

[itsmartinhi]

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

[devashish2024]

Also happens if you try to use framer-motion's <motion.div> (or any other) components without marking component as 'use client'