Introduce check for element that has getBoundlingClientRects

Fixes codesandbox#2197
Fixes codesandbox#2191
Fixes codesandbox#2193

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/index.tsx

@@ -439,8 +439,11 @@ export default class DevTools extends React.PureComponent<Props, State> {
     return (
       <Container
         ref={el => {
-          this.node = el;
-          this.normalizeHeight(el);
+          this.node = el || this.node;
+
+          if (this.node) {
+            this.normalizeHeight(el);
+          }
         }}
         style={{
           flex: primary

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.js

@@ -21,20 +21,20 @@ import ModuleTab from './ModuleTab';
 class EditorTabs extends React.Component {
   componentDidUpdate(prevProps) {
     if (this.props.currentModuleId !== prevProps.currentModuleId) {
+      const currentTab = this.tabEls[this.props.currentModuleId];
+
       // We need to scroll to the tab
-      if (this.tabEls[this.props.currentModuleId]) {
+      if (currentTab && this.container) {
         const { width } = this.container.getBoundingClientRect();
         const scroll = this.container.scrollLeft;
-        const { left } = this.tabEls[
-          this.props.currentModuleId
-        ].getBoundingClientRect();
+        const { left } = currentTab.getBoundingClientRect();
 
         if (left > scroll && left < scroll + width) {
           // if it's already in view
           return;
         }
 
-        this.tabEls[this.props.currentModuleId].scrollIntoView(false);
+        currentTab.scrollIntoView(false);
       }
     }
   }