component does not work with React 16

[abramobagnara]

The cause is the use of ReactDOM.render return value, that is an obsolete feature (also in React 15).
We should use ref instead.

https://facebook.github.io/react/docs/react-dom.html#render

[paranoidjk]

https://github.com/react-component/notification/blob/master/src/Notification.jsx#L99

[paranoidjk]

I think it should works fine, see the react document:

Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

[paranoidjk]

Please give a reproducible demo, and the detail error info.

[abramobagnara]

You can reproduce the crash using npm install --save react@next react-dom@next
and putting this reduced testcase in examples/test.js:

/* eslint-disable no-console */
import 'rc-notification/assets/index.less';
import Notification from 'rc-notification';
import React from 'react';
import ReactDOM from 'react-dom';
let notification;

function simpleFn() {
  notification.notice({
    content: <span>simple show</span>,
    onClose() {
      console.log('simple close');
    },
  });
}

class App extends React.Component {
  render() {
    return <div>hello</div>
  }
  componentDidMount() {
    notification = Notification.newInstance({});
    simpleFn();
  }
}

ReactDOM.render(<App/>, document.getElementById('__react-content'));

You will see in console:

TypeError: Cannot read property 'add' of null

[abramobagnara]

See facebook/react#10309 for the clarification why this is a breaking changes in React 16 that will remain.

The point is that to use the return value of ReactDOM.render should be avoided in general.

[benjycui]

How about an online demo?

Please provide a re-producible demo: http://codepen.io/benjycui/pen/aJooRE?editors=0011

Edit: @paranoidjk , it seems that rc-notification hasn't provided dist file? See: https://unpkg.com/rc-notification@2.0.2/

[benjycui]

ping~ @paranoidjk

[paranoidjk]

@benjycui react-component/react-component.github.io#14

It's caused by rc-tools break change.

[paranoidjk]

@abramobagnara Please provide a reproducible demo, eg: https://codepen.io/paranoidjk/pen/NvxmKQ?editors=0011

@benjycui I found our umd dist do not handle add-module-exports, users must use

const Notification = window['rc-notification'].default;

[abramobagnara]

This is a reproducible demo:

https://codepen.io/abramo/pen/ZJQgBL?editors=1111

[bkniffler]

Any news on this one?

[henrycity]

I have the same error TypeError: Cannot read property 'add' of null as well. After upgrading to React 16, it doesn't work anymore. This also affects Toast component in antd-mobile.