Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rashidul0405 opened this issue May 2, 2024 · 6 comments
Open
Labels
bug Issue was opened via the bug report template. Runtime Related to Node.js or Edge Runtime with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).

Comments

@rashidul0405
Copy link
Contributor

rashidul0405 commented May 2, 2024

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!!!

@rashidul0405 rashidul0405 added the bug Issue was opened via the bug report template. label May 2, 2024
@github-actions github-actions bot added Runtime Related to Node.js or Edge Runtime with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). labels May 2, 2024
@poorvasingh04
Copy link

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
Copy link
Contributor Author

rashidul0405 commented May 2, 2024

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
Copy link
Contributor Author

rashidul0405 commented May 4, 2024

@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
Copy link
Contributor Author

@eps1lon
Copy link
Member

eps1lon commented May 14, 2024

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
Copy link
Member

eps1lon commented May 14, 2024

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Runtime Related to Node.js or Edge Runtime with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
Projects
None yet
Development

No branches or pull requests

3 participants