fix style duplicate

MrWangJustToDo · MrWangJustToDo · commit de89b9f5b3e5 · 2022-06-26T21:15:04.000+08:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-ssr",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "author": "mrwang",
   "license": "MIT",
   "scripts": {
@@ -27,7 +27,7 @@
     "dotenv": "^16.0.0",
     "express": "^4.18.1",
     "express-session": "^1.17.3",
-    "framer-motion": "^6.3.11",
+    "framer-motion": "^6.3.15",
     "immer": "^9.0.15",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -63,42 +63,42 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@swc/core": "^1.2.203",
+    "@swc/core": "^1.2.205",
     "@types/compression": "^1.7.2",
     "@types/cookie-parser": "^1.4.3",
     "@types/cors": "^2.8.12",
     "@types/express": "^4.17.13",
     "@types/express-session": "^1.17.4",
-    "@types/jest": "^28.1.1",
+    "@types/jest": "^28.1.3",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.182",
     "@types/multer": "^1.4.7",
     "@types/node": "^18.0.0",
-    "@types/react": "^18.0.12",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.17.0",
     "@types/webpack-hot-middleware": "^2.25.6",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "autoprefixer": "^10.4.7",
     "babel-jest": "^28.1.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-import": "^1.13.5",
     "clean-webpack-plugin": "^4.0.0",
-    "core-js": "^3.23.1",
+    "core-js": "^3.23.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-import-resolver-typescript": "^3.1.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.11",
     "identity-obj-proxy": "^3.0.0",
@@ -109,12 +109,12 @@
     "postcss-loader": "^7.0.0",
     "prettier": "^2.7.0",
     "react-refresh": "^0.14.0",
-    "sass": "^1.52.3",
-    "sass-loader": "^13.0.0",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.1",
     "style-loader": "^3.3.1",
     "swc-loader": "^0.2.3",
     "thread-loader": "^3.0.4",
-    "typescript": "^4.7.3",
+    "typescript": "^4.7.4",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-middleware": "^5.3.3",
diff --git a/src/client/chakraEntry.tsx b/src/client/chakraEntry.tsx
@@ -1,30 +1,37 @@
 import { ChakraProvider, createCookieStorageManager } from "@chakra-ui/react";
+import { CacheProvider } from "@emotion/react";
 import { StrictMode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import { App } from "components/App";
+import { createEmotionCache } from "config/emotionCache";
 import { theme } from "theme";
 
 import type { createUniversalStore } from "store";
 
+const emotionCache = createEmotionCache();
+
 const Root = ({ store }: { store: ReturnType<typeof createUniversalStore> }) => {
   console.warn("you are using chakra UI component library!");
 
+  // this component will only run once when the page mount, so it's ok to use server's cookie
   const cookieStore = createCookieStorageManager("chakra-ui-color-mode", store.getState().server.cookie.data);
 
   return (
     <StrictMode>
-      <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
-        <Provider store={store}>
-          <Router>
-            <HelmetProvider>
-              <App />
-            </HelmetProvider>
-          </Router>
-        </Provider>
-      </ChakraProvider>
+      <CacheProvider value={emotionCache}>
+        <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
+          <Provider store={store} serverState={store.getState()}>
+            <Router>
+              <HelmetProvider>
+                <App />
+              </HelmetProvider>
+            </Router>
+          </Provider>
+        </ChakraProvider>
+      </CacheProvider>
     </StrictMode>
   );
 };
diff --git a/src/config/emotionCache.ts b/src/config/emotionCache.ts
@@ -0,0 +1,3 @@
+import createCache from "@emotion/cache";
+
+export const createEmotionCache = () => createCache({ key: "css" });
diff --git a/src/server/middleware/renderPage/renderSSR/renderChakra.tsx b/src/server/middleware/renderPage/renderSSR/renderChakra.tsx
@@ -1,10 +1,12 @@
 import { ChakraProvider, createCookieStorageManager } from "@chakra-ui/react";
+import { CacheProvider } from "@emotion/react";
 import { renderToPipeableStream } from "react-dom/server";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider } from "react-redux";
 import { StaticRouter as Router } from "react-router-dom/server";
 
 import { App } from "components/App";
+import { createEmotionCache } from "config/emotionCache";
 import { HTML } from "template/Html";
 import { theme } from "theme";
 import {
@@ -26,6 +28,8 @@ import type { SafeAction } from "../compose";
 export const targetRender: SafeAction = async ({ req, res, store, lang, env, page }) => {
   const helmetContext = {};
 
+  const emotionCache = createEmotionCache();
+
   const cookieStore = createCookieStorageManager("chakra-ui-color-mode", store.getState().server.cookie.data);
 
   const stateFileContent = await getAllStateFileContent(manifestStateFile("client"));
@@ -55,15 +59,17 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, pag
       preLoad={generatePreloadScriptElements(mainScripts.concat(runtimeScripts).concat(dynamicScriptsPath))}
       reduxInitialState={JSON.stringify(store.getState())}
     >
-      <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
-        <Provider store={store}>
-          <Router location={req.url}>
-            <HelmetProvider context={helmetContext}>
-              <App />
-            </HelmetProvider>
-          </Router>
-        </Provider>
-      </ChakraProvider>
+      <CacheProvider value={emotionCache}>
+        <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
+          <Provider store={store} serverState={store.getState()}>
+            <Router location={req.url}>
+              <HelmetProvider context={helmetContext}>
+                <App />
+              </HelmetProvider>
+            </Router>
+          </Provider>
+        </ChakraProvider>
+      </CacheProvider>
     </HTML>,
     {
       bootstrapScripts: [...runtimeScripts, ...mainScripts, ...dynamicScriptsPath],
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import createCache from "@emotion/cache";`
	`2`	`+`
	`3`	`+export const createEmotionCache = () => createCache({ key: "css" });`