-
-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot set property createElement of [object Module] which has only a getter #429
Comments
I am having the similar error. The error on the terminal says "cannot set property of jsx". Anything new? |
I am running into the error as well when I try to use signals in a Nextjs13 project. When 'reactStrictMode' is set to false, signal seems able to continue working even with the error. Not sure if it is Next specific, but the issue was not observed in React projects. |
Spent a bit time on it today, and found out the error likely related to Next.js's pre-rendering feature (https://nextjs.org/learn-pages-router/basics/data-fetching/pre-rendering). Pre-rendering happens at build time (for production) or at each page request (for development). I've confirmed the error doesn't show up at build time if I replace 'next build' with 'next experimental-compile' which is a new command that skips the pre-rendering step. I didn't see this error either when I took dynamic import approach with { ssr : false } option for a component including signals. |
So basically don't use signals in nextjs. |
I don't think there's any need for signals to hook into React for SSR, since the state will never change server-side. Therefore, it should be enough (🤞) for signals-react to not call Unfortunately, I don't know enough about either Signal's or Next's codebase to make that happen. To help people googling find this issue, here's my error: Related: vercel/next.js/issues/45054 Added a workaround to that issue. |
Thanks. I tried the workaround and it does the job. But I am seeing a side-effect that it voids the rendering optimization features of Signals, i.e., those components that are not subscribing to a signal would be also re-rendered when the signal value changes 😞 |
Try the library I just published on npm (signals-react-safe), it fixes the re-rendering issue. |
@JonAbrams, thanks for the fix, it was quick.👍 Yeah, it is working most of the part now: the original error is gone ✔️, and only text node is updated when signal updates without re-rendering the component✔️. The only remaining one is when signal passed into a component as prop, the component doesn't get re-rendered (if referring to signal value in text node) when signal updates; referring to signal works though. Sorry, I am new to React/Next/Signals, maybe I missed anything? Anyway, the library with the fix provides pretty much everything of Signals I need for Next. Thanks again! |
To have the component re-render when a signal updates, use the
`useSignalValue` hook I added.
|
Works like a charm! 👍 |
Or just add |
I tried to use this in a nextjs page without luck. The signal I want to use is to hold the current lang value
The error when this page renders on the server:
|
Under the hood |
Actually, it turns out you're not supposed to use hooks in server components. Instead, access the signal and/or it's value directly in the server component. Since server components don't re-render, it should be safe. In the future, please raise an issue with the e.g. import { language } from '../mySignals';
const Page = () => {
const t = translate(languages[language.value]);
return (
<section>
{t('CREATE_EVENT')}
</section>
)
} |
it seems like you guys seeing this error at the server side component, but I use it literally at client side components but not with the props drilling way, just the export and import way, and the error occurs... |
The error appears to stem from trying to patch signals/packages/react/runtime/src/auto.ts Line 371 in d7f2afa
There seems to be some inconsistent behavior on webpack module resolution with ES module interop in how We've noticed our patching of (React.default || React).createElement = wrap(React.createElement); or Object.assign(React.default || React, {createElement: wrap(React.createElement)}); |
This is a problem related with monkeypatching from |
Error:
Cannot set property createElement of [object Module] which has only a getter
Environment:
Code:
Expected:
At least the app to load, instead receiving the error described.
Tried all approaches possible, even the documentation examples within my environment.
The text was updated successfully, but these errors were encountered: