NextJS Server-side Rendering bug / docs error

[JonnyDawe]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

I am trying to use Sandpack with NextJS. Following the documentation exactly as seen in the docs here I get this error: TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function.

The example repo implementation is different from the documentation example and places Sandpack in a "use client" component.

I'm presuming the documentation in this case is incorrect and it is not possible to use Sandpack in a React Server Component?

What were you doing when the problem occurred?

I exactly replicated the documentation, copying over code snippets.

This code causes the error.

import { Sandpack } from "@codesandbox/sandpack-react";

export default function Home() {
  return (
    <div>
      <Sandpack theme="dark" />
    </div>
  );
}

What steps can we take to reproduce the problem?

Take the app directory example repo for nextjs and copy in the above snippet to the home page.tsx file.

Your Environment

Software	Name/Version
Sandpack-client version	"2.13.2"
Sandpack-react version	"2.13.2"
Browser	chrome
Operating System	macOS

[fuadinadhif]

Do you find the solution? I face the exact same problem.

[fuadinadhif]

I found the solution. We need to render Sandpack in client side, so use "use client" in the intended file. Sandpack actually has an extensive examples in this repository https://github.com/codesandbox/sandpack/tree/main/examples/

[mauriciorossdev]

I found the solution. We need to render Sandpack in client side, so use "use client" in the intended file. Sandpack actually has an extensive examples in this repository https://github.com/codesandbox/sandpack/tree/main/examples/

Hello! I was having similar problems, but I ran into this error that does not let me move forward, I used the example of next js app dir, but I had no success, could you tell a little more about how you solved it? maybe it is a matter of version of next js and react?

Here is the error in question: TypeError: Cannot read properties of null (reading 'useState')

[fuadinadhif]

I found the solution. We need to render Sandpack in client side, so use "use client" in the intended file. Sandpack actually has an extensive examples in this repository https://github.com/codesandbox/sandpack/tree/main/examples/

Hello! I was having similar problems, but I ran into this error that does not let me move forward, I used the example of next js app dir, but I had no success, could you tell a little more about how you solved it? maybe it is a matter of version of next js and react?

Here is the error in question: TypeError: Cannot read properties of null (reading 'useState')

Based on the error message you provided. I suspect the error is not within the Sandpack package but in your own code. Maybe you try to read the value of useState but never defined it first/it contains null value without using optional chaining?