React: cannot set property 'nextEffect' of undefined

[gajus]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Loading a page produces an error:

cannot set property 'nextEffect' of undefined

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).

Unable to replicate the bug in isolation. However, it can be seen on a live page https://go2cinema.com

It is not clear (without knowing React internals) what uses the nextEffect. I have tried using setState, etc. Please advise a plausible test case scenario and I will create a test.

What is the expected behavior?

No error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• React ^16.0.0-rc.2.
• Chrome v25

Note, it is important that Google Chrome v25 works, because otherwise "Fetch as Google" does not work either, i.e. pages are not being indexed, e.g. http://imgur.com/a/phmGU.

See this discussion https://www.reddit.com/r/javascript/comments/6pqrz5/react_16_beta/dkrgvzj/

[gaearon]

Does it only happen with Chrome 25? Do you have any error analytics system set up to check if it happens in other browsers too?

[gajus]

I was only able to replicate it in Chrome v25 (and below) and PhantomJS.

I have been taking apart the main application component by component trying to find what exactly is causing it. But it is a rather slow process. Will share an update if I get to the bones of it.

[gajus]

For a bit more context, stack trace in development mode.

[gaearon]

Can you step through deleteChild and take note of variable values? E.g. whether .alternate is null at first or not, whether it is somehow undefined, etc.

[gajus]

Finally figured out whats going on. Here is a simple case to reproduce the issue:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Aux from 'react-aux';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';

class Foo extends Component {
  render () {
    return <div>
      FOO
    </div>;
  }
}

class Bar extends Component {
  render () {
    return <div>
      BAR
    </div>;
  }
}

const root = document.querySelector('#app');

const modal = undefined;

ReactDOM.render(<Router>
  <Aux>
    <Switch>
      <Route path='/' component={Foo} />
    </Switch>
    {modal}

    <Bar />
  </Aux>
</Router>, root);

Using:

"babel-runtime": "^6.25.0",
"react": "^16.0.0-rc.2",
"react-aux": "^1.0.1",
"react-dom": "^16.0.0-rc.2",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"

Alternatively, pull this repo https://github.com/gajus/react-webpack-babel-tutorial

[gajus]

@gaearon Anything else I can help with?

[gaearon]

I'll take a look today. Does it repro with modern Chrome too?

[gajus]

Does it repro with modern Chrome too?

No.

[gaearon]

Where can I download old Chrome?

[gajus]

I've got it from https://google-chrome.en.uptodown.com/mac/old.

[gajus]

Just a tip: (Assuming you are using OSX) The best thing to do is to create a new OSX user for installing old chrome. Once downloaded, disable WiFi. Once installed, go straight to settings to disable auto update.

The reason for new OSX user is because two Chrome versions don't play nice under the same userspace.

[gaearon]

That’s helpful, thanks.

[gaearon]

Hmm. As mentioned in https://github.com/facebook/react/issues/10294:

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg

I don’t see the polyfill in your example—am I missing something?

[gajus]

I don’t see the polyfill in your example—am I missing something?

https://github.com/gajus/react-webpack-babel-tutorial/blob/da3eb0f31bd3db888a78e0d16b1ab7e88b82282d/index.html#L8

[gaearon]

This is a bug in the polyfill you're using.
https://github.com/Financial-Times/polyfill-service/issues/1299

[gajus]

@gaearon Of course.. I should I have tried to force re-use the same polyfill configuration on the latest Chrome. I noticed that polyfill is in the stack trace but didn't give it a second thought.

Good detective work. Thank you.