Custom Props on Code Component crashes Plasmic

Issues
1

Relevant Docs: Custom prop controls for code components | Learn Plasmic

I attempted to create and render a set of custom prop controls, but when interacted with the component it crashes Plasmic. I tried registering the example CodeComponent to test if it was my implementation, but this also crashed the editor. I’m using Plasmic Codegen and Next.js 15 (React & ReactDOM 19) with App Router, and the editor is pointed to my localhost:3000. All other components are otherwise fine, but interacting with a component with custom prop controls causes the crash.

Unexpected error (4 occurrences)
TypeError: C.ReactDOM.render is not a function

4506.1cd15740.js:465 TypeError: C.ReactDOM.render is not a function
at index.0cfb452b.js:2:1135696
at oO (lib-react.8d577690.js:2:153157)
at uB (lib-react.8d577690.js:2:182247)
at u_ (lib-react.8d577690.js:2:165065)
at r6 (lib-react.8d577690.js:2:113867)
at uT (lib-react.8d577690.js:2:165440)
at rM (4506.1cd15740.js:517:654366)
at rL (4506.1cd15740.js:517:654020)
at rD (4506.1cd15740.js:517:649667)
at nV (4506.1cd15740.js:517:639747)
at nj (4506.1cd15740.js:517:639249)
at r3 (4506.1cd15740.js:517:654991)
at index.0cfb452b.js:2:3541078
at em (4506.1cd15740.js:517:2128444)
at T.C (index.0cfb452b.js:2:3540784)
at index.0cfb452b.js:2:3502138
at lib-polyfill.293cd197.js:2:235621
at Object.next (lib-polyfill.293cd197.js:2:235726)
at n (lib-polyfill.293cd197.js:2:219015)
at c (lib-polyfill.293cd197.js:2:219212)
at lib-polyfill.293cd197.js:2:219271
at new Promise ()
at lib-polyfill.293cd197.js:2:219153
at index.0cfb452b.js:2:3502458
at index.0cfb452b.js:2:3745656
at 4506.1cd15740.js:551:387368
at Object.process (4506.1cd15740.js:551:382182)
at index.0cfb452b.js:2:3540481
at lib-polyfill.293cd197.js:2:235621
at Object.next (lib-polyfill.293cd197.js:2:235726)
at n (lib-polyfill.293cd197.js:2:219015)
at c (lib-polyfill.293cd197.js:2:219212)
at lib-polyfill.293cd197.js:2:219271
at new Promise ()
at lib-polyfill.293cd197.js:2:219153
at T.value (index.0cfb452b.js:2:3540583)
at index.0cfb452b.js:2:3539169
at lib-polyfill.293cd197.js:2:235621
at Object.next (lib-polyfill.293cd197.js:2:235726)
at n (lib-polyfill.293cd197.js:2:219015)
at c (lib-polyfill.293cd197.js:2:219212)
at lib-polyfill.293cd197.js:2:219271
at new Promise ()
at lib-polyfill.293cd197.js:2:219153
at T.value (index.0cfb452b.js:2:3539186)
at index.0cfb452b.js:2:3538696
at lib-polyfill.293cd197.js:2:235621
at Object.next (lib-polyfill.293cd197.js:2:235726)
at n (lib-polyfill.293cd197.js:2:219015)
at c (lib-polyfill.293cd197.js:2:219212)

2

On further inspection, it seems its calling a deprecated method from React DOM. I suppose its not fully updated for React 19.

3

Hi,

Have you followed the docs on Get started with Next.js | Learn Plasmic to integrate with nextjs app dir?

Could you provide a video and the snippets of code of the code component that is crashing the studio for you?

4

Hi fmota, I’ve done some further testing here;

This seems to work fine with the pages directory (create-plasmic-app with Next.js).

But when creating a Next.js using App Directory, and adding Plasmic using either @plasmicapp/react-web/lib/host or @plasmicapp/loader-nextjs, the Custom Props causes the aforementioned error. So I’m guessing this is an issue with the App Router (or perhaps my implementation). I’ve added a Git repo with main using react-web, and the a branch for loader-nextjs;

5

Hey @fmota, any info on this?

6

I’m experiencing the same issue too @angelo_hague @fmota

7

Any information on this at all? This would be incredibly useful in complex components, especially given how user-unfriendly the current array props are for non-devs (e.g. Item 0, Item 1, Item 2, etc.)

8

@fmota

9

Hello, we have an alpha package that can work on React 19 / Next.js 15. We won’t be finalizing this package for a few months though. However, you can expect the API to be fairly stable.

https://www.npmjs.com/package/@plasmicapp/loader-nextjs/v/2.0.0-alpha.1?activeTab=versions

10

Hi Jason, thanks for you reply! We have been looking at the NextJS loader, as its faster to publish changes than performing a full rebuild when using CodeGen.

The main downside for us here is that SSR with App Router isn’t fully supported. If we decide on the NextJS Loader, we may revisit custom prop controls

11

Right, the main thing that doesn’t work in app router right now is data-fetching during SSR. It’s incompatible with our data-fetching client components. We’ve been actively working on server components for fetching data that will be launched soon.

1 Like