issue with `use`, string value works but object value fails to compile

[rashidul0405]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/use-use-x3pns4

To Reproduce

1. pnpm run dev
2. shows compiler error
3. Comment out line 14 from app/components/button.tsx
4. it works now

Current vs. Expected behavior

while using use, context value as a string works fine but context value as an object is not working.

String value working fine: components/theme-provider.tsx

<ThemeContext.Provider value="dark">
  {children}
</ThemeContext.Provider>

Here theme value is either dark or light, which is a string.

Object value is not working: components/user-provider.tsx

<UserContext.Provider
  value={{
    firstName: "Tom",
    lastName: "Brady",
  }}
>
  {children}
</UserContext.Provider>

AND reading value using use from context returns empty object

console.log("theme", theme);
console.log("user", user);

outputs

theme {}
user {}

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.3.0-canary.36 // Latest available version is detected (14.3.0-canary.36).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, Runtime, Upstream

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

none of the versions are working including canary. Not sure whether this one is a React issue or Next!!!

[poorvasingh04]

This is because you are trying to use React client hook in a server component. Did you read this? - https://nextjs.org/docs/messages/react-client-hook-in-server-component

[rashidul0405]

Thanks. Yeah, this has been the case for a long time. If I remember correctly, I discovered that use can be utilized on both server and client components. Additionally, on react.dev, it's documented as an API instead of hooks. https://react.dev/reference/react/use

I'm wondering if I'm correct and what's the proper way to use use!!

[rashidul0405]

@ElectricCodeGuy it's recommended to use async/await for data fetching?

When fetching data in a Server Component, prefer async and await over use. async and await pick up rendering from the point where await was invoked, whereas use re-renders the component after the data is resolved.

https://react.dev/reference/react/use#caveats

However, this is not answering the issue I am facing.

[rashidul0405]

@eps1lon @delbaoliveira created the issue here from X https://x.com/sebsilbermann/status/1785979252686385321

[eps1lon]

Does it not compile or does it just silently return the wrong context value? Is it the default that it returns or always an empty object?

[eps1lon]

It should fail compilation since use(SomeContex) implies you import a file using createContext in a server component. This is not supported since React Context is a client-only feature.

You should see an error similar to "createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component"