Using toJS inside observer component crashes in ES5 mode

[LinusCenterstrom]

Intended outcome:
Should be able to use toJS inside observer component

Actual outcome:
Mobx crashes with the message

[MobX] MobX is currently configured to be able to run in ES5 mode, but in ES5 MobX won't be able to iterate keys to detect added / removed properties. Use `keys` from 'mobx' instead.

How to reproduce the issue:
call

configure({
  useProxies: "ifavailable"
});

then use toJS inside an observer component

Sandbox:
https://codesandbox.io/s/immutable-leaf-lcoi8?file=/src/App.js

Versions
mobx: 6.1.8
mobx-react-lite: 3.2.0

If this is not fixable it should probably be documented.
There is an example that uses toJS here https://mobx.js.org/react-integration.html#dont-pass-observables-into-components-that-arent-observer and I assume that would crash in ES5 mode too

[LinusCenterstrom]

To fix this temporarly i copied over the relevant parts of the toJS code and changed the line throwing an error

It seems like changing

mobx/packages/mobx/src/api/tojs.ts

Lines 52 to 56 in bc8db3d

	keys(source) // make sure keys are observed
	const res = cache(__alreadySeen, source, {})
	getPlainObjectKeys(source).forEach((key: any) => {
	res[key] = toJSHelper(source[key], __alreadySeen)
	})

to

 const res = cache(__alreadySeen, source, {}) 
 keys(source).forEach((key: any) => { 
     res[key] = toJSHelper(source[key], __alreadySeen) 
 }) 

fixes the problem

[mweststrate]

This is working exactly as intended. That error is there for exactly the reason stated in the error and your work around will probably break in IE

…

On Thu, 1 Apr 2021, 10:14 LinusCenterstrom, ***@***.***> wrote: To fix this temporarly i copied over the relevant parts of the toJS code and changed the line throwing an error In doing so it seems like changing https://github.com/mobxjs/mobx/blob/bc8db3df9405034999f8feb8c95ba8045c7ae008/packages/mobx/src/api/tojs.ts#L52-L56 to const res = cache(__alreadySeen, source, {}) keys(source).forEach((key: any) => { res[key] = toJSHelper(source[key], __alreadySeen) }) fixes the problem — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBC2TW3UO7C6YPWNVGTTGQ2PXANCNFSM42GT2L3Q> .

[urugator]

@mweststrate You sure? #2619 (comment)

I can fix this, I am just not sure which "keys" we should return, currently it returns own enumerable keys + own enumerable symbols, dunno if it still makes sense.

[mweststrate]

Nope, my answer was to quick but cant log in to GH from my phone 😅

…

On Thu, 1 Apr 2021, 14:40 urugator, ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> You sure? #2619 (comment) <#2619 (comment)> I can fix this, I am just not sure which "keys" we should return, currently it returns own enumerable keys+symbols, dunno if it still makes sense. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDS2Q6FI3PYT2O55ITTGRZVVANCNFSM42GT2L3Q> .