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
.