Importing of use state and lifecycle effects in Next.js server component

[0x221A]

Issue Description

As of now, Next.js (v13.4.19) is trying to resolve React components under @apollo/client/react which contains use state and lifecycle effects that are not supported in RSC.

Without using "use client" directive on top of the component that contains use state and lifecycle effects, I think Next.js assumes that those components can be used in RSC. Previously PR (#11000) prevented the errors. But in the end, It did not fix how Next.js is going to treat those components.

The error appears when using Next.js edge runtime and importing @apollo/client in the underlying code that is related to one of the RSC components. But the error doesn't appear when using Node.js runtime or when using edge runtime with turbopack, I think that somehow this problem is related to the Next.js compiler config between webpack and turbopack.

Workaround

I came up with 2 workarounds. The first one is directly importing the core function directly @apollo/client/core. This will prevent the compiler from bundling the unsupported hooks into the server component. Another workaround is to patch the package by adding "use client" directive to every component that has use state and lifecycle effect.

Related: #10974

Link to Reproduction

https://codesandbox.io/p/sandbox/white-microservice-h9xd4f

Reproduction Steps

No response

[0x221A]

@phryneas

[phryneas]

I've contacted the React team on this, let's see what the result will be.

[phryneas]

@0x221A as a potential workaround, could you verify if the build from #11175 would work for you?

npm i @apollo/client@0.0.0-pr-11175-20230828151003

[0x221A]

@phryneas It's working for me but also breaking other external non-rsc components in my project.

[0x221A]

I don't think the React wrapper is a good choice. Instead, why not use "use client" pragma to indicate this component cannot be used in RSC and let the compiler do it work?

[phryneas]

@phryneas It's working for me but also breaking other external non-rsc components in my project.

Can you give an example of a component that would break? In a non-rsc case, the compiler should pick up the normal react package, as per this file. The "wrapper" file should only ever be imported in a RSC context:

https://github.com/phryneas/rehackt/blob/324240c1a643325b9bbf9d814a07d83babaee3aa/package.json#L13-L18

Instead, why not use "use client" pragma to indicate this component cannot be used in RSC and let the compiler do it work?

Because "use client" works on a per-file basis, not on a per-component basis. Depending on which build of Apollo Client you use in the end, you might even be dealing with just "one file" for the full Apollo Client. You could not import anything from AC anymore.
We would have to change our full bundling setup to deal with this - which would be a breaking change and require us to release a new major just to accommodate a decision the React team made there.
We want to do this at some point, but we can't just release AC 4.0 just for this.

[0x221A]

Can you give an example of a component that would break? In a non-rsc case, the compiler should pick up the normal react package, as per this file. The "wrapper" file should only ever be imported in a RSC context:

I think it's because of another external React library that caused the problem. After fixing everything works just fine now.

Because "use client" works on a per-file basis, not on a per-component basis. Depending on which build of Apollo Client you use in the end, you might even be dealing with just "one file" for the full Apollo Client. You could not import anything from AC anymore.

Ok, I got your point.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.