Error when instantiating component

bionicvapourboy commented 5 years ago

React version React 16.6.0

Code to reproduce the issue

import Particles from 'react-particles-js';

// code

render() {
    return (
        <div>
           <Particles />
        </div>
    )
}

Expected result No console error

Actual result

particles.js?fa2e:1 Uncaught TypeError: Cannot read property 'destroy' of undefined
    at t.value (particles.js?fa2e:1)
    at t.value (particles.js?fa2e:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js?61bb:15173)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at safelyCallComponentWillUnmount (react-dom.development.js?61bb:15180)
    at commitUnmount (react-dom.development.js?61bb:15472)
    at commitNestedUnmounts (react-dom.development.js?61bb:15503)
    at unmountHostComponents (react-dom.development.js?61bb:15759)

bionicvapourboy commented 5 years ago

Update This seems to be related to component and refs mount (my stack involves react-router/redux/loadable).

Checking that parent component is mounted before mount the child component seems to solve the issue:

  state = {
    mounted: false,
  };

  particles = () => (this.state.mounted ? <Particles /> : '');

  componentDidMount() {
    this.setState({ mounted: true })
  }

  render() {
     // JSX
    {this.particles()}
  }

wufe commented 5 years ago

Fixed in v2.5.1

wufe / react-particles-js

Error when instantiating component #75