14.2.0 throws errors with Turbopack when importing client components in route handlers that use context

[jmikrut]

Link to the code that reproduces this issue

https://github.com/jmikrut/next-turbo-client-components

To Reproduce

1. Start up the app with Webpack - npm run dev - note that it works
2. Start up the app with Turbopack - npm run dev:turbo - note that it breaks

Current vs. Expected behavior

Turbopack throws the following error:

TypeError: 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

But, the component that uses createContext indeed has the 'use client' directive at the top of the file, so this error should not be thrown.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.16.0
  pnpm: 8.15.1
Relevant Packages:
  next: 14.2.0 // Latest available version is detected (14.2.0).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Turbopack (--turbo)

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

next dev (local)

Additional context

Up until 14.2.0-canary.34, Turbopack was working properly for us at Payload. After that, Turbopack now throws an error.

Release that breaks it:
https://github.com/vercel/next.js/releases/tag/v14.2.0-canary.34

It might seem strange that we are importing client components in a request handler, BUT, the Payload config contains both server-side and client-side code, including custom React components. We need the Payload config within API routes in order to function, so, safely being able to disregard client components within route handlers is paramount to us.

Also of note, useState works fine in the ClientComponent included in this repro. It's just createContext that breaks Turbopack.

_PACK-3014

[dkokotov]

I've run into a similar error but with a slightly different repro scenario.

in my case, I have a server component like this:

import { Center } from '@chakra-ui/react';

export default function MyServerComponent() {
    return (
        <Center>
            <MyClientComponent />
        </Center>
    );
}

Even though I am using version 2.8.2 of @chakra-ui/react which has all of its components marked with use client, this throws off the same TypeError: createContext only works in Client Components ... error as in OP. Moving the <Center/> into MyClientComponent, which is defined in my own project and also has use client, fixes it. So it seems like the behavior (in my case, different from OP) is related to importing a client component from a different package.

[jmikrut]

Hey @wbinnssmith I just did some testing with this on 14.3.0-canary.15 and we are still seeing the same error.

Might be worth noting that we have components within node_modules that are using context. Did your fix / test address context usage coming from Node modules as well? Or only local files?

I have updated the reproduction in this initial post to demonstrate that local client files with useContext are now working since the fix referencing this issue, but context usage from within node_modules is still broken.

Take a look at this file for a working route:
https://github.com/jmikrut/next-turbo-client-components/blob/main/app/my-route-working/route.ts

And this one for a broken route:
https://github.com/jmikrut/next-turbo-client-components/blob/main/app/my-route-broken/route.ts

Any ideas?

[wbinnssmith]

@jmikrut ah yeah, I'm working on resolving that in #64751. Will re-open.

[jmikrut]

Amazing - thank you!

[jmikrut]

Epic - thanks everyone. Confirmed everything works in Payload again. 👍

[timneutkens]

Thanks for checking James!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.