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.
See https://codesandbox.io/s/rrjq1?file=/public/index.js
In summary, if you use
@twind/wmrand importpreact/compat, re-render is broken by the errorCannot set property className of #<Object> which has only a getterAlthough I haven't investigated why
preact/compatcauses this issue, the error itself is caused because the component havingtwhasclassNamegetter when re-render.First time rendering
Second time rendering
When I manually deleted the getter by debugger, the second time rendering succeeded. So, I guess we can implement that logic in
@twind/preactregardless of the issue caused bypreact/compat.