Couldn't get userBody

mouthains · July 10, 2026, 8:35am

npx create-plasmic-app@latest
? What is your project named? twistie
? What React framework do you want to use? Next.js
? What language do you want to use? TypeScript
? Which scheme do you want to use to integrate Plasmic? Codegen
? Do you want to use the app/ directory and React Server Components? (see Next.js Docs: App Router | Next.js) Yes
? If you don’t have a project yet, create one by going to Plasmic
What is the URL of your project? Plasmic

Let’s get started! Here’s what we’ll do:

Authenticate with Plasmic
Create a React/Next/Gatsby repo
Integrate with Plasmic

==================================================

AUTHENTICATING WITH PLASMIC

Plasmic credentials are ok.

==================================================

CREATING THE PROJECT

npx create-next-app@16 --redacted–/twistie --ts --app --eslint --no-src-dir --import-alias “@/*” --no-tailwind
(node:1089644) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
(Use node --trace-deprecation ... to show where the warning was created)
Need to install the following packages:
create-next-app@16.2.10
Ok to proceed? (y)

Using defaults for unprovided options:

–no-react-compiler No React Compiler (use --react-compiler for React Compiler)
–agents-md AGENTS.md (use --no-agents-md for No AGENTS.md)

Creating a new Next.js app in --redacted–\twistie.

Using npm.

Initializing project with template: app

Installing dependencies:

next
react
react-dom

Installing devDependencies:

@types/node
@types/react
@types/react-dom
eslint
eslint-config-next
typescript

added 399 packages, and audited 400 packages in 45s

164 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

Generating route types…
✓ Types generated successfully

Initialized a git repository.

Success! Created twistie at --redacted–\twistie

==================================================

INSTALLING THE PLASMIC DEPENDENCY

npm install --ignore-scripts @plasmicapp/cli

added 1 package, and audited 401 packages in 4s

164 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.
Successfully added @plasmicapp/cli dependency.

==================================================

SYNCING PLASMIC COMPONENTS

npx plasmic sync --yes -p 9aZMummxQLZRfD6ZJFFRRh
No plasmic.json file found. Initializing plasmic…
Detected Next.js with app/ directory (experimental)…
Plasmic Express Setup – Here are the default settings we recommend:

What directory should React component files (that you edit) be put into?

components
What directory should Plasmic-managed files (that you should not edit) be put into? (This is relative to “components”)
./plasmic
What directory should pages be put into? (This is relative to “components”)
../app
What target language should Plasmic generate code in?
Typescript (tsconfig.json detected)
How should we generate css for Plasmic components?
CSS modules, imported as “import sty from ‘./plasmic.module.css’”
How should we reference image files used in Plasmic components?
Images stored in a public folder, referenced like
What directory should static image files be put into? (This is relative to “components”)
../public
What’s the URL prefix from which the app will serve static files? (for Next.js, this is usually “/”)
/

Would you like to accept these defaults?> Accept these defaults
Successfully created plasmic.json.

@plasmicapp/react-web is a small runtime required by Plasmic-generated code.
Do you want to add them now? (Y/n): y
npm install --ignore-scripts @plasmicapp/react-web
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency

added 50 packages, and audited 451 packages in 19s

164 packages are looking for funding
run npm fund for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.
Successfully added @plasmicapp/react-web dependency.
‘twistie has never been synced before. Syncing…’
Syncing module: plasmic@latest [‘twistie’ 9aZMummxQLZRfD6ZJFFRRh latest]
Syncing module: PlasmicStyleTokensProvider@latest [‘twistie’ 9aZMummxQLZRfD6ZJFFRRh latest]
Syncing component: Homepage@latest [‘twistie’ 9aZMummxQLZRfD6ZJFFRRh/SlQPopbnUnAd latest]
Fixing import statements…
Fixing “rscServer” with “plasmic/twistie/PlasmicHomepageServer.tsx” and from “../app/page.tsx”
Fixing “rscServer” with “plasmic/twistie/PlasmicHomepageServer.tsx” and from “plasmic/twistie/PlasmicHomepage.tsx”

Your Plasmic project “twistie” has now been synced to disk.

Using Plasmic Components

For each component, Plasmic generates two React components
in two files. For example, for component Homepage, there
are:

A blackbox component at plasmic/twistie/PlasmicHomepage.tsx
This is a blackbox, purely-presentational library component
that you can use to render your designs. This file is owned
by Plasmic, and you should not edit it – it will be
overwritten when the component design is updated. This
component should only be used by the “wrapper” component
(below).
A wrapper component at ../app/page.tsx
This component is owned and edited by you to instantiate the
PlasmicHomepage component with desired variants, states,
event handlers, and data. You have complete control over
this file, and this is the actual component that should be
used by the rest of the codebase.

Learn more at Codegen overview | Learn Plasmic

Congrats! We created the Plasmic-connected project at twistie

Change directories into your new project and start the development server:

cd twistie
npm run dev

Navigate to the routes (e.g. /home) defined by your page components from Plasmic Studio.
To watch for changes in Plasmic components, in a separate terminal run:
npx plasmic watch

samuel_pullman · July 10, 2026, 9:30am

Hi @mouthains,

There is an issue with Next.js 16.2 dev mode and Plasmic app-hosting, starting in Next.js 16.2.7, their dev server turned on a new debug feature that conflicts with Plasmic studio.

We have a fix for it that should be rolled out soon, but it is possible to unblock yourself now by adding experimental: { reactDebugChannel: false }, to next.config.ts. Once we fix this in Studio you can revert the config.

mouthains · July 11, 2026, 1:21pm

Thank you for your solution. I amended the file to include the code and clear the browser cache and voila Plasmic Studio can be used but the following error appeared in developer console:

layout.tsx:11 A tree hydrated but some attributes of the server rendered HTML didn’t match the client properties. This won’t be patched up. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== ‘undefined’)`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it’s called. - Date formatting in a user’s locale which doesn’t match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. hydrateRoot – React … <HotReload globalError={[…]} webSocket={WebSocket} staticIndicatorState={{pathname:null, …}}> <HTTPAccessFallbackBoundary notFound={}> <HTTPAccessFallbackErrorBoundary pathname=“/plasmic-host” notFound={} …> <_next_root_layout_boundary_> <html lang=“en” - className=“__non_interactive_canvas” > …

mouthains · July 12, 2026, 11:40pm

I had suppressed the error with changes made to layout.tsx as followed:-

import “../components/plasmic/chapter_3/plasmic.css”;

import “@/app/globals.css”;

import { ClientPlasmicRootProvider } from “../components/plasmic/plasmic-init-client”;

export default function RootLayout({

children,

}: Readonly<{

children: React.ReactNode;

}>) {

return (


<html lang="en" suppressHydrationWarning>

  <body>

    <ClientPlasmicRootProvider>

      {children}

    </ClientPlasmicRootProvider>

  </body>

</html>


);

}

samuel_pullman · July 17, 2026, 8:18am

Got it, thanks for the followup!

By the way, we updated the Studio so reactDebugChannel: false shouldn’t be necessary anymore.

sebastian_leo · July 17, 2026, 1:41pm

Thanks for the update! That’s good to know.

hernan_lozano · July 24, 2026, 7:01pm

Hi, I had to use reactDebugChannel: false today, I’m using nextjs 16.2.11 (app layout) and plasmic loader-nextjs 2.0.17

I was able to replicate the issue in a blank project + new npx create-plasmic-app@latest

When I get to the nextjs layout question:

? Do you want to use the app/ directory and React Server Components? (see
https://nextjs.org/docs/app) (Use arrow keys)
❯ Yes, use app/ directory      ===>>> THIS DIDN'T WORK
  No, use pages/ directory     ===>>> THIS WORKED

samuel_pullman · August 3, 2026, 4:13pm

@hernan_lozano This should be fixed now (without reactDebugChannel: false). The NextJS debug protocol is a bit fragile, so our previous fix had to be adjusted.