Cannot define property:children, object is not extensible.

[slmgc]

Hi!

I've tried to add preact-compat to my app and it failed with this error.
It happens when I use this construct:

<Posts {...this.props.posts} />

I was able to resolve it by replacing with:

<Posts items={this.props.posts.items}
    isLoading={this.props.posts.isLoading} />

P.S. I wasn't able to reproduce this issue with some minimal code snippet
but it happens in my boilerplate app:

https://github.com/slmgc/preact-baobab-template/blob/dev/src/controllers/posts.js#L15

[developit]

Hi @slmgc - was this with preact 5.0.1-beta.9, or a newer version? I will see if I can reproduce the children error locally.

[slmgc]

@developit I've tried it with:

"preact": "5.1.0-beta.19",
"preact-compat": "1.8.1",

Some of my components use higher-order wrappers that's why it's not easy to reproduce.

[developit]

@slmgc The error is happening because props.posts is created by Baobab as frozen/sealed. Normally that's not an issue, but this code ends up passing that object into Preact as the props for the Posts component, breaking preact-compat's additions:

<Posts {...this.props.posts } />
// Babel optimization transforms the above to no-copy:
h(Posts, this.props.posts);

I was able to work around the issue by changing the code to this:

// clone the object first:
<Posts {...{ ...this.props.posts }} />

// add any property to have babel do the clone for you:
<Posts foo {...this.props.posts} />

// clone explicitly:
let posts = Object.assign({}, this.props.posts);
<Posts {...posts} />

I think we can at least catch this in preact-compat and work around it, but it's a bit of an odd case.

[developit]

Seems to be working nicely now with preact-compat@1.8.2. Sorry for the wait!

[slmgc]

@developit works smoothly, thanks a lot!