Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'componentWillReact' of undefined after updating to 6.1.0. #709

Closed
hh83917 opened this issue Jun 19, 2019 · 16 comments · Fixed by #720
Labels

Comments

@hh83917
Copy link

@hh83917 hh83917 commented Jun 19, 2019

Due to the recent componentDidUpdate bug in mobx-react v6 we tried to upgrade to 6.1.0 but the page doesn't load and got this in the console.

vendors.bundle.a88a35b9.js:145824 Uncaught TypeError: Cannot read property 'componentWillReact' of undefined

"mobx": "^4.5.0",
"mobx-react": "^6.1.0"

Tried updating mobx to 4.11.0 and mobx-react to 6.1.1 doesn't fix it either.

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Jun 19, 2019

I assume you don't use componentWillReact in your code (it's deprecated since V5 and removed in V6)? Well, there is the only occurrence of it here...

if (target.componentWillReact)

That would effectively mean you have tried to call observer on something that does not have a prototype. That's definitely strange, hard to guess what's wrong without seeing an actual code. Reproduction in CodeSandbox would be the best.

Either way, we should guard against undefined (in here) and produce some better error message.

@hh83917

This comment has been minimized.

Copy link
Author

@hh83917 hh83917 commented Jun 19, 2019

Thanks @FredyC for the tip! ...tried to call observer on something that does not have a prototype.

I found someone did this on some of the functional components:

const SomeComponent observer(() => {
	...etc.
})

export default observer(SomeComponent)

Good thing it breaks so we got that syntax thing fixed, someone (gitblame... 😛) may have missed it during refactor from class component.

@hh83917 hh83917 closed this Jun 19, 2019
@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Jun 20, 2019

Glad I could help.

I will keep this open as we shall provide better handling of such error. The error you encountered is definitely way too cryptic.

@FredyC FredyC reopened this Jun 20, 2019
@mweststrate

This comment has been minimized.

Copy link
Member

@mweststrate mweststrate commented Jun 20, 2019

@hh83917 could you give us the actual component definition that was wrong? That will help us in creating a reproduction (all the methods can be empty, it is just about the structure your code was in)

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Jun 20, 2019

@mweststrate He already did, here is the repro... https://codesandbox.io/s/shy-monad-2d4up

@hh83917

This comment has been minimized.

Copy link
Author

@hh83917 hh83917 commented Jun 20, 2019

@FredyC @mweststrate Thanks for following up on the issue and @FredyC for creating that sand box for me as reference for better error messages.

As @FredyC pointed out, we are not using componentWillReact in our codebase, so the error message definitely comes as cryptic. Also, we were originally on 6.0.3 and the page still renders with double observers in couple places in some older codes. Was not expecting breaking change when upgrading to 6.1.0.

@ConneXNL

This comment has been minimized.

Copy link

@ConneXNL ConneXNL commented Jun 25, 2019

I just got this when I accidentally used React.memo and observer at the same time:
observer(React.memo((props) => test)))

@anoopmd

This comment has been minimized.

Copy link

@anoopmd anoopmd commented Jul 9, 2019

I got the same error. Rolled back to 5.4.4 and its working fine in the older version.

@FredyC FredyC closed this in #720 Jul 9, 2019
@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Jul 9, 2019

@anoopmd Thanks for the reminder, forgot about a pending PR. Just merged so it should be fixed in the next V6 release.

@johnnyreilly

This comment has been minimized.

Copy link

@johnnyreilly johnnyreilly commented Jul 27, 2019

I just got this when I accidentally used React.memo and observer at the same time:
observer(React.memo((props) => test)))

@ConneXNL thanks for sharing that - I just bumped on this too.

Would someone be able to provide an explanation of why you can't mix React.memo and observer please? I'd love to give a good explanation to the team (and understand myself 😄 )

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Jul 27, 2019

Well, observer packs React.memo underneath, so there is no need to use it (only by accident). Why it's a problem to have it there twice it's probably more of the question for a React team :)

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Aug 8, 2019

6.1.2 published with this fix

@jstansbe

This comment has been minimized.

Copy link

@jstansbe jstansbe commented Aug 8, 2019

"Cannot read property ' componentWillReact' of undefined"

"mobx": "^5.13.0",
"mobx-react": "^6.1.2",
"mobx-state-tree": "^3.14.1",
"react": "16.8.6",
"react-native": "0.60.4",

Edit:
After adding @babel/plugin-proposal-class-properties and @babel/plugin-proposal-decorators i get the following error:
undefined is not an object (evaluating 't.componentWillReact')

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Aug 8, 2019

@jstansbe Can you provide reproduction, please? Might be some other case we have missed there.

@andq-ibl

This comment has been minimized.

Copy link

@andq-ibl andq-ibl commented Aug 19, 2019

I'm using :

"node":v10.13.0,
"react": "^16.8.4",
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",

Got the same issue but I do not use react.memo. I checked the code and make some log:
Screen Shot 2019-08-19 at 4 08 00 PM

And the result I got is like this:
Screen Shot 2019-08-19 at 4 10 37 PM

After changing t=e.prototype to t=e.__proto__, it's worked

@FredyC

This comment has been minimized.

Copy link
Contributor

@FredyC FredyC commented Aug 19, 2019

@andq-ibl Once again, without reproduction, it's not possible to fix it.

And I am going to lock this, it's clearly some other issue so let's treat it like that.

@mobxjs mobxjs locked as resolved and limited conversation to collaborators Aug 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
8 participants
You can’t perform that action at this time.