Cannot read property 'insertBefore' of null

emiloberg commented 8 years ago

As I work in an enterprise portal environment I have to deliver my React bundles in a quite unorthodox way.

I attach the Webpack build bundle to the window object. The output property of my Webpack config looks a little bit like this:

{
    libraryTarget: 'var',
    library: ['reactComponents', 'myStuff123']
}

I then pick up the component from the window object (e.g. window.reactComponents.myStuff123) and render the React component as such:

        ReactDOM.render(
                React.createElement(window.reactComponents.myStuff123),
                document.getElementById('UNIQUE_ID')
        );

However, as I add a package, which includes react-resizeme, to the window object I guess that it's immediately trying to set up some event listeners or such, because I get this error:

Uncaught TypeError: Cannot read property 'insertBefore' of null

Is there any way of postponing the execution until it's actually rendered?

Loading example

A full example of the HTML and loading mechanisms looks like this:

<!DOCTYPE html>
<html>
<head>
    <script src="react-0.14.8.min.js"></script>
    <script src="react-dom-0.14.8.min.js"></script>
    <script src="bundle.js"></script>
</head>
<body>

<div id="UNIQUE_ID"></div>

<script>
    (function(){
        ReactDOM.render(
                React.createElement(window.reactComponents.NamespacedReactComponent),
                document.getElementById('UNIQUE_ID')
        );
    })();
</script>
</body>
</html>

ctrlplusb commented 8 years ago

Hmmm, I am struggling to think why this is. Could you please link me to the package that is consuming react-sizeme?

ctrlplusb commented 8 years ago

Or a sample project that I could use for debugging... :)

ctrlplusb commented 8 years ago

I've just done a patch release which includes a fix for event listener race condition issues with unmounted components. It may help your case, please try and let me know.

https://github.com/ctrlplusb/react-sizeme/releases/tag/v2.0.1

tonyxiao commented 8 years ago

Seeing a similar issue as well.

ctrlplusb commented 8 years ago

@tonyxiao any chance you could throw up a sample project for me? I'm more than happy to debug the issue.

ctrlplusb commented 8 years ago

@tonyxiao I see you have forked and attempted to lazy load the resizer. Did it have any effect on the issue?

tonyxiao commented 8 years ago

@ctrlplusb yes that fixed the issue for me. I haven't figured out "why" it fixes the issue other than it does :P

tonyxiao commented 8 years ago

It crashes even at import time due to importing an external package element-size-monitor (or something like that, forgot the exact name)

tonyxiao commented 8 years ago

WIll see if I can get a super clean example later.

ctrlplusb commented 8 years ago

@tonyxiao awesome. :)

Thanks for looking into this, I think I understand what is going on now. I had a look at the element-resizer source and there is definitely some DOM interaction that goes on just by instantiating it, so your fix is perfect. Looks like @emiloberg was on the right track too. Thanks for this gents.

Don't worry about a sample project. I think we can move forward with the fix. Are you happy to send a PR?

ctrlplusb commented 8 years ago

There was a patch release available for element-resize-detector so I have updated react-sizeme and have done a release.

@tonyxiao heads up. :)

tonyxiao commented 8 years ago

Sweet, thank you @ctrlplusb for being so responsive!

ctrlplusb commented 8 years ago

No probs. :) Thanks for your help! :)

Just to be clear my recent change doesn't include your changes. Are you happy to proceed with a PR? I don't mind completing it either if you have your hands full.

tonyxiao commented 8 years ago

Yep created. https://github.com/ctrlplusb/react-sizeme/pull/8

ctrlplusb commented 8 years ago

Thanks @tonyxiao!

ctrlplusb / react-sizeme

Cannot read property 'insertBefore' of null #6

Loading example