tw-in-js / use-twind-with

Twind integration packages for frameworks & libraries with examples
MIT License
68 stars 17 forks source link

[@twind/preact,wmr] Can't re-render objects by `Cannot set property className of #<Object> which has only a getter` #20

Open riywo opened 3 years ago

riywo commented 3 years ago

See https://codesandbox.io/s/rrjq1?file=/public/index.js

In summary, if you use @twind/wmr and import preact/compat, re-render is broken by the error Cannot set property className of #<Object> which has only a getter

Although I haven't investigated why preact/compat causes this issue, the error itself is caused because the component having tw has className getter when re-render.

First time rendering

> s.__lookupGetter__('className')
undefined

Second time rendering

> s.__lookupGetter__('className')
ƒ (){return this.class}
preact:formatted:25 Uncaught (in promise) TypeError: Cannot set property className of #<Object> which has only a getter
    at Object.T.i.vnode (preact:formatted:25)

When I manually deleted the getter by debugger, the second time rendering succeeded. So, I guess we can implement that logic in @twind/preact regardless of the issue caused by preact/compat.

riywo commented 3 years ago

This line from preact/compat might be the code changing behaviour: https://github.com/preactjs/preact/blob/c7f57db13af43b8cc3353a138639ad9dd9523e16/compat/src/render.js#L189