`app` dir does not work with React.createContext #41929

alex-kinokon · 2022-10-27T02:40:56Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #137-Ubuntu SMP Wed Jun 15 13:33:07 UTC 2022
Binaries:
  Node: 16.18.0
  npm: 8.3.0
  Yarn: 1.22.18
  pnpm: 6.32.11
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

N/A, but Node.js is v16.18.0

How are you deploying your application? (if relevant)

next dev

Describe the Bug

Using @emotion/react as jsxImportSource does not work with app dir, with the following error:

Server Error
TypeError: React.createContext is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack

eval
  (sc_server)/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js (21:47)
Object.(sc_server)/./node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js
  file:///home/me/app/.next/server/app/page.js (425:1)

console.log(React) at the error site shows that it indeed doesn’t have createContext.

React.version is 18.3.0-next-d925a8d0b-20221024.

Expected Behavior

Using @emotion/react as jsxImportSource works with app dir.

Link to reproduction

https://replit.com/@alex-kinokon/app-playground

To Reproduce

Set jsxImportSource to @emotion/react in tsconfig.json

The text was updated successfully, but these errors were encountered:

BWBama85 · 2022-10-27T03:17:22Z

Same error, different module. Maybe has something to do with them shipping two different versions of react?

Mine:

TypeError: React__default.default.createContext is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
webpack-internal:///(sc_server)/./node_modules/react-daisyui/dist/react-daisyui.cjs (5586:60)

wh5938316 · 2022-10-27T03:19:10Z

I meet the same error when I use react-query.

in page.tsx:

import { QueryClient } from "@tanstack/react-query";
...
// same error
const queryClient = new QueryClient();

raajnadar · 2022-10-27T03:49:11Z

It seems we need to do this

https://beta.nextjs.org/docs/rendering/server-and-client-components#convention

React context is only for the client side, can someone test it and let me know? I just now reset my git, when it didn’t work, will try in tomorrow

BWBama85 · 2022-10-27T04:09:46Z

I'll test here in a few.

BWBama85 · 2022-10-27T04:16:24Z

This worked. Moved out of layout.tsx and broke out into navbar.tsx for a quick test.

import './globals.css'
import Nav from './navbar'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body>
        <Nav />
        {children}
      </body >
    </html >
  )
}

'use client';

import { Navbar, Dropdown, Button, Menu } from 'react-daisyui'

export default function Nav() {
  return (
    <div className="pb-40 flex w-full component-preview p-4 items-center justify-center gap-2 font-sans">
      <Navbar>
        <Navbar.Start>
          <Dropdown>
            <Button color="ghost" tabIndex={0} className="lg:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h8m-8 6h16"
                />
              </svg>
            </Button>
          </Dropdown>
          <a className="btn btn-ghost normal-case text-xl">The Wilson Net</a>
        </Navbar.Start>
        <Navbar.Center className="hidden lg:flex">
          <Menu horizontal className="p-0">
            <Menu.Item>
              <a>Item 1</a>
            </Menu.Item>
            <Menu.Item tabIndex={0}>
              <a>
                Parent
                <svg
                  className="fill-current"
                  xmlns="http://www.w3.org/2000/svg"
                  width={20} height={20}
                  viewBox="0 0 24 24">
                  <path
                    d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
                  />
                </svg>
              </a>
              <Menu className="p-2 bg-base-100">
                <Menu.Item>
                  <a>Submenu 1</a>
                </Menu.Item>
                <Menu.Item>
                  <a>Submenu 2</a>
                </Menu.Item>
              </Menu>
            </Menu.Item>
            <Menu.Item>
              <a>Item 3</a>
            </Menu.Item>
          </Menu>
        </Navbar.Center>
        <Navbar.End>
          <Button>Get started</Button>
        </Navbar.End>
      </Navbar>
    </div>
  );
}

raajnadar · 2022-10-27T04:25:01Z

@BWBama85 thank you for testing it!!

So now it is clear we cannot use the react hooks on the server so we need to add the use client directive & we need to keep client & server code separate

temrb · 2022-10-27T05:07:16Z

I think there needs to better error handling saying exactly that^

raajnadar · 2022-10-27T06:23:46Z

@temrb it is in the beta stage even though the docs are for beta, so we need to accept this pain, the API might also break in the future updates

ThomasAunvik · 2022-10-27T07:42:37Z

I have the same issue, but for react-bootstrap. and also tried with MUI.
React-Bootstrap does support "Server Side Rendering".
https://react-bootstrap.github.io/getting-started/server-side-rendering/

Not sure how in which side should be fixed for, and what it can be done. But it seems very much like you have to wrap every single client component with "use client" for when you want to use server components on it.

balazsorban44 · 2022-10-27T22:02:43Z

Hi, this is expected if the component using createContext isn't marked with use client. We are already working on a better error message and adding it to the docs soon to explain this better, but the behavior here is not a bug, so I am closing this. Thanks for reporting!

github-actions · 2022-11-27T00:21:51Z

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

alex-kinokon added the bug Issue was opened via the bug report template. label Oct 27, 2022

raajnadar mentioned this issue Oct 27, 2022

appDir cannot read properties of null (reading useContext) @ build #41931

Closed

1 task

BWBama85 mentioned this issue Oct 27, 2022

NextJS v13.0 issues daisyui/react-daisyui#244

Closed

temrb mentioned this issue Oct 27, 2022

react-query hydration in /app/page.tsx thrown error: React.createContext is not a function #41936

Closed

1 task

ThomasAunvik mentioned this issue Oct 27, 2022

Support NextJS 13 /app directory server-side rendering? react-bootstrap/react-bootstrap#6475

Closed

3 tasks

balazsorban44 closed this as completed Oct 27, 2022

balazsorban44 added the area: app App directory (appDir: true) label Oct 27, 2022

Sec-ant mentioned this issue Nov 2, 2022

Zustand breaks with NextJS 13 when enabling appDir (Cannot read properties of null (reading 'useDebugValue')) pmndrs/zustand#1395

Closed

github-actions bot locked as resolved and limited conversation to collaborators Nov 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`app` dir does not work with React.createContext #41929

`app` dir does not work with React.createContext #41929

alex-kinokon commented Oct 27, 2022

BWBama85 commented Oct 27, 2022 •

edited

Loading

wh5938316 commented Oct 27, 2022

raajnadar commented Oct 27, 2022

BWBama85 commented Oct 27, 2022

BWBama85 commented Oct 27, 2022

raajnadar commented Oct 27, 2022

temrb commented Oct 27, 2022

raajnadar commented Oct 27, 2022

ThomasAunvik commented Oct 27, 2022

balazsorban44 commented Oct 27, 2022

github-actions bot commented Nov 27, 2022

app dir does not work with React.createContext #41929

app dir does not work with React.createContext #41929

Comments

alex-kinokon commented Oct 27, 2022

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

BWBama85 commented Oct 27, 2022 • edited Loading

wh5938316 commented Oct 27, 2022

raajnadar commented Oct 27, 2022

BWBama85 commented Oct 27, 2022

BWBama85 commented Oct 27, 2022

raajnadar commented Oct 27, 2022

temrb commented Oct 27, 2022

raajnadar commented Oct 27, 2022

ThomasAunvik commented Oct 27, 2022

balazsorban44 commented Oct 27, 2022

github-actions bot commented Nov 27, 2022

`app` dir does not work with React.createContext #41929

`app` dir does not work with React.createContext #41929

BWBama85 commented Oct 27, 2022 •

edited

Loading