react-sizeme: Cannot read property 'insertBefore' of null
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>
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 1
- Comments: 15 (15 by maintainers)
Commits related to this issue
- Merge branch 'tonyxiao-master' fix(bug): Resize Detector is now lazily used in order to prevent #6. Thanks @tonyxiao element-resize-detector package looks to be doing some interfacing with the DOM... — committed to ctrlplusb/react-sizeme by ctrlplusb 8 years ago
- fix(browser): Resize Detector is now lazily used in order to prevent #6. Thanks @tonyxiao! element-resize-detector package looks to be doing some interfacing with the DOM on import. This caused issu... — committed to ctrlplusb/react-sizeme by ctrlplusb 8 years ago
Yep created. https://github.com/ctrlplusb/react-sizeme/pull/8
@ctrlplusb yes that fixed the issue for me. I haven’t figured out “why” it fixes the issue other than it does 😛