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.

Sign up for GitHub

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

Jump to bottom

Cannot read property 'insertBefore' of null #6

Closed
emiloberg opened this issue May 12, 2016 · 15 comments
Closed

Cannot read property 'insertBefore' of null #6

emiloberg opened this issue May 12, 2016 · 15 comments
Labels
bug
Milestone
2.0.3

Comments

@emiloberg
Copy link

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
Copy link
Owner

ctrlplusb commented May 14, 2016 •
edited
Loading

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

@ctrlplusb
Copy link
Owner

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

@ctrlplusb
Copy link
Owner

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
Copy link
Contributor

Seeing a similar issue as well.

@ctrlplusb
Copy link
Owner

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

@ctrlplusb ctrlplusb added the bug label May 18, 2016
@ctrlplusb
Copy link
Owner

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

@tonyxiao
Copy link
Contributor

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

@tonyxiao
Copy link
Contributor

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

@tonyxiao
Copy link
Contributor

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

@ctrlplusb
Copy link
Owner

ctrlplusb commented May 19, 2016 •
edited
Loading

@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 ctrlplusb modified the milestones: 2.0.2, 2.0.3 May 19, 2016
@ctrlplusb
Copy link
Owner

ctrlplusb commented May 19, 2016 •
edited
Loading

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
Copy link
Contributor

Sweet, thank you @ctrlplusb for being so responsive!

@ctrlplusb
Copy link
Owner

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 tonyxiao mentioned this issue May 21, 2016
Merged
@tonyxiao
Copy link
Contributor

Yep created. #8

@ctrlplusb
Copy link
Owner

Thanks @tonyxiao!

ctrlplusb added a commit that referenced this issue May 21, 2016
@ctrlplusb
fix(browser): Resize Detector is now lazily used in order to prevent #6…
32b64ba 
…. Thanks @tonyxiao!

element-resize-detector package looks to be doing some interfacing with the DOM on import.  This
caused issues for users where the DOM was not ready yet.
@lyuzashi lyuzashi mentioned this issue May 21, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
2.0.3
Development

No branches or pull requests
3 participants
@tonyxiao @emiloberg @ctrlplusb