Link to the code that reproduces this issue
https://github.com/hakimmazouz/import-from-client-components
To Reproduce
- Start the application in Development
- Check the logs for a log of
fragment that gets imported from the client component MyClientComponent.tsx
- Notice that instead of getting a string, you get an empty object
Current vs. Expected behavior
This used to work prior to Next.js 14 (13.5.6) but for some reason doesn't work now. I have an inkling as to why (bundling and wanting to separate the interweaving of client and server components) but this break a pattern we use for colocating queries (GraphQL, GROQ etc.) with our components.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:41 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8103
Available memory (MB): 8192
Available CPU cores: 8
Binaries:
Node: 20.8.1
npm: 10.1.0
Yarn: 1.22.19
pnpm: 8.6.0
Relevant Packages:
next: 14.2.3 // Latest available version is detected (14.2.3).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: 5.4.5
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Developer Experience, Module Resolution, Runtime, Turbopack, Webpack
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
If anybody can point me to somewhere in the Next.js documentation explaining this behavior I would appreciate it as right now this type of bundling breaks everything I expect out of ES Modules.
Link to the code that reproduces this issue
https://github.com/hakimmazouz/import-from-client-components
To Reproduce
fragmentthat gets imported from the client componentMyClientComponent.tsxCurrent vs. Expected behavior
This used to work prior to Next.js 14 (13.5.6) but for some reason doesn't work now. I have an inkling as to why (bundling and wanting to separate the interweaving of client and server components) but this break a pattern we use for colocating queries (GraphQL, GROQ etc.) with our components.
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:41 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8103 Available memory (MB): 8192 Available CPU cores: 8 Binaries: Node: 20.8.1 npm: 10.1.0 Yarn: 1.22.19 pnpm: 8.6.0 Relevant Packages: next: 14.2.3 // Latest available version is detected (14.2.3). eslint-config-next: N/A react: 18.3.1 react-dom: 18.3.1 typescript: 5.4.5 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Developer Experience, Module Resolution, Runtime, Turbopack, Webpack
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
If anybody can point me to somewhere in the Next.js documentation explaining this behavior I would appreciate it as right now this type of bundling breaks everything I expect out of ES Modules.