inject function introduces conflict with new React static context

[zisiszikos]

I'm trying to use mobx-react inject function along with the new static context of React, and I'm getting this error:

Warning: inject-MainCompClass declares both contextTypes and contextType static properties. The legacy contextTypes property will be ignored.

Check the console at this example.

I guess that inject uses the old React context style, and React decides to use only the new style used by the component. This has as a result, the mobx store to be undefined.

Versions:
react: 16.6.3
mobx: 5.6.0
mobx-react: 5.4.2

[mweststrate]

I might be mistaken, but I think your problem is not Provider / inject, but combining React.createContext (new React api) with static ContextTypes (old React api), and you should be using MyContext.Consumer instead Op vr 23 nov. 2018 om 17:25 schreef Zisis Zikos <[email protected]>:

…

I'm trying to use mobx-react inject function along with the new static context of React, and I'm getting this error: Warning: inject-MainCompClass declares both contextTypes and contextType static properties. The legacy contextTypes property will be ignored. Check the console at this example <https://codesandbox.io/s/wq5q96q807>. I guess that inject uses the old React context style, and React decides to use only the new style used by the component. This has as a result, the mobx store to be undefined. Versions: react: 16.6.3 mobx: 5.6.0 mobx-react: 5.4.2 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#612>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhIzrCtvt23RGphjSuLhrSUayn16lks5uyCGJgaJpZM4Yw5va> .

[titouancreach]

I think @zisiszikos is right. static contextType is a new React feature that we cannot use because of mobx-react. I've a different error but I think this is the same bug behind

react-dom.development.js:506 Warning: inject-Header-with-xxxxxxx declares both contextTypes and contextType static properties. The legacy contextTypes property will be ignored.
index.module.js:645 Uncaught Error: MobX injector: Store 'xxxxxxx' is not available! Make sure it is provided by some Provider

In my case, that make the mobx contextTypes to be ignored

To reproduce, just try to play arround with the new feature static contextType

[ntucker]

This library should use https://github.com/jamiebuilds/create-react-context so it can work with next react context.

[ntucker]

needs hoist-non-react-statics upgrade

[ntucker]

@zisiszikos try adding

"resolutions": {
    "hoist-non-react-statics": "3.2.1"
  }

to your package.json.

This should force this library to use the latest hoist-non-react-statics since they haven't upgraded.

[ntucker]

apparently observer just breaks classes that use static contextType unequivocally. I'm going to introduce another wrapper component just to solve that issue.

[mweststrate]

Reproduced, thanks for reporting. Will release a fix soon

[mweststrate]

Fix has been released as 5.4.3

[zisiszikos]

Perfect! I confirm that is working now.
Check the updated example.