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?