make @grafana/ui run properly in SSR environments (#46288)

* allow SSR

* fix rollup commonjs default flag changed breaking in SSR

* revert wrong change

* avoid using dynamic imports

* fix test

* allow icon load in packaged version

* fix SelectBase to run on SSR

* add extra check for fixing tests

* revert wrong change

* allow SSR

* revert wrong change

* don't include emotion in the bundle

* fix wrong merge changes

* remove unneeded icon change

* use forked version of uplot

* remove unneeded bundle exceptions

* fix typescript issues

* update to latest uplot

packages/grafana-ui/rollup.config.ts

@@ -35,10 +35,13 @@ const buildCjsPackage = ({ env }) => {
       'moment',
       'jquery', // required to use jquery.plot, which is assigned externally
       'react-inlinesvg', // required to mock Icon svg loading in tests
+      '@emotion/react',
+      '@emotion/css',
     ],
     plugins: [
       commonjs({
         include: /node_modules/,
+        ignoreTryCatch: false,
       }),
       resolve(),
       svg({ stringify: true }),

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx

@@ -24,7 +24,7 @@ interface State {
 export class ClickOutsideWrapper extends PureComponent<Props, State> {
   static defaultProps = {
     includeButtonPress: true,
-    parent: window,
+    parent: typeof window !== 'undefined' ? window : null,
     useCapture: false,
   };
   myRef = createRef<HTMLDivElement>();

packages/grafana-ui/src/components/Icon/iconBundle.ts

@@ -170,7 +170,7 @@ export function initIconCache() {
 
   // This function needs to be called after index.js loads to give the
   // application time to modify __webpack_public_path__ with a CDN path
-  const grafanaPublicPath = (window as any).__grafana_public_path__;
+  const grafanaPublicPath = typeof window !== 'undefined' && (window as any).__grafana_public_path__;
   if (grafanaPublicPath) {
     iconRoot = grafanaPublicPath + 'img/icons/';
   }

packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts

@@ -14,7 +14,7 @@ const JSON_DATE_REGEX = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
 const MAX_ANIMATED_TOGGLE_ITEMS = 10;
 
 const requestAnimationFrame =
-  window.requestAnimationFrame ||
+  (typeof window !== 'undefined' && window.requestAnimationFrame) ||
   ((cb: () => void) => {
     cb();
     return 0;

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -228,7 +228,7 @@ export function SelectBase<T>({
     menuPlacement: menuPlacement === 'auto' && closeToBottom ? 'top' : menuPlacement,
     menuPosition,
     menuShouldBlockScroll: true,
-    menuPortalTarget: menuShouldPortal ? document.body : undefined,
+    menuPortalTarget: menuShouldPortal && typeof document !== 'undefined' ? document.body : undefined,
     menuShouldScrollIntoView: false,
     onBlur,
     onChange: onChangeWithEmpty,

packages/grafana-ui/src/utils/debug.ts

@@ -15,8 +15,10 @@ export function attachDebugger(key: string, thebugger?: any, logger?: Logger) {
   }
 
   // @ts-ignore
-  let debugGlobal = window['_debug'] ?? {};
+  let debugGlobal = (typeof window !== 'undefined' && window['_debug']) ?? {};
   debugGlobal[key] = completeDebugger;
-  // @ts-ignore
-  window['_debug'] = debugGlobal;
+  if (typeof window !== 'undefined') {
+    // @ts-ignore
+    window['_debug'] = debugGlobal;
+  }
 }

packages/grafana-ui/src/utils/dom.ts

@@ -1,5 +1,5 @@
 // Node.closest() polyfill
-if ('Element' in window && !Element.prototype.closest) {
+if (typeof window !== 'undefined' && 'Element' in window && !Element.prototype.closest) {
   Element.prototype.closest = function (this: any, s: string) {
     const matches = (this.document || this.ownerDocument).querySelectorAll(s);
     let el = this;

packages/grafana-ui/src/utils/measureText.ts

@@ -1,4 +1,4 @@
-const context = document.createElement('canvas').getContext('2d')!;
+let _context: CanvasRenderingContext2D;
 const cache = new Map<string, TextMetrics>();
 const cacheLimit = 500;
 let ctxFontStyle = '';
@@ -7,7 +7,10 @@ let ctxFontStyle = '';
  * @internal
  */
 export function getCanvasContext() {
-  return context;
+  if (!_context) {
+    _context = document.createElement('canvas').getContext('2d')!;
+  }
+  return _context;
 }
 
 /**
@@ -22,6 +25,8 @@ export function measureText(text: string, fontSize: number): TextMetrics {
     return fromCache;
   }
 
+  const context = getCanvasContext();
+
   if (ctxFontStyle !== fontStyle) {
     context.font = ctxFontStyle = fontStyle;
   }