[docs] Fix emotion broken in SSR (#22731)

mui · Sep 25, 2020 · 13c77c6 · 13c77c6
1 parent 2596203
commit 13c77c6
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -66,12 +66,12 @@
     "clipboard-copy": "^3.0.0",
     "clsx": "^1.0.4",
     "core-js": "^2.6.11",
+    "create-emotion-server": "^10.0.27",
     "cross-env": "^7.0.0",
     "css-mediaquery": "^0.1.2",
     "date-fns": "^2.15.0",
     "docsearch.js": "^2.6.3",
     "doctrine": "^3.0.0",
-    "emotion-server": "^10.0.27",
     "emotion-theming": "^10.0.27",
     "express": "^4.17.1",
     "fg-loadcss": "^2.0.1",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -281,7 +281,7 @@ function findActivePage(currentPages, pathname) {
 }
 
 // Cache for the ltr version of the styles
-const cacheLtr = createCache();
+export const cacheLtr = createCache();
 cacheLtr.compat = true;
 
 // Cache for the rtl version of the styles

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import { ServerStyleSheet } from 'styled-components';
-import { extractCritical } from 'emotion-server';
+import createEmotionServer from 'create-emotion-server';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
+import { cacheLtr } from 'docs/pages/_app';
+
+const { extractCritical } = createEmotionServer(cacheLtr);
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark

diff --git a/yarn.lock b/yarn.lock
@@ -5583,7 +5583,7 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-emotion-server@10.0.27:
+create-emotion-server@10.0.27, create-emotion-server@^10.0.27:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/create-emotion-server/-/create-emotion-server-10.0.27.tgz#24b135d9ef3bca32b6812c0b670feb675edd17e3"
   integrity sha512-1EbZgdjiho9ue1BSTpAez8SIdfbTXomtz0bg+LPOEvf/5OV7xqCGJaoSCDCB+y7kZ73hwoEhLsoPmqKSGIQMXg==