Update emotion support (MUI latest version) and add support for Node with ESM

examples/support-yarn2-pnp/package.json

@@ -23,8 +23,7 @@
     "lz-string": "^1.4.4",
     "pnp-webpack-plugin": "^1.6.4",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "urlsafe-base64": "^1.0.0"
+    "react-dom": "^16.13.1"
   },
   "installConfig": {
     "pnp": true

packages/core/lib/webpack/antd.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '__REACT_SSR_APP__';
 import Page from '__REACT_SSR_PAGE__';
 
 const getProps = () => {
   const compressedProps = document.getElementById('react-ssr-script').dataset.props;
-  const decoded = URLSafeBase64.decode(compressedProps);
-  const decompressed = LZString.decompressFromUint8Array(decoded);
+  const decompressed = LZString.decompressFromBase64(compressedProps);
   return JSON.parse(decompressed);
 }
 

packages/core/lib/webpack/default.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '__REACT_SSR_APP__';
 import Page from '__REACT_SSR_PAGE__';
 
 const getProps = () => {
   const compressedProps = document.getElementById('react-ssr-script').dataset.props;
-  const decoded = URLSafeBase64.decode(compressedProps);
-  const decompressed = LZString.decompressFromUint8Array(decoded);
+  const decompressed = LZString.decompressFromBase64(compressedProps);
   return JSON.parse(decompressed);
 }
 

packages/core/lib/webpack/emotion.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '__REACT_SSR_APP__';
 import Page from '__REACT_SSR_PAGE__';
 
 const getProps = () => {
   const compressedProps = document.getElementById('react-ssr-script').dataset.props;
-  const decoded = URLSafeBase64.decode(compressedProps);
-  const decompressed = LZString.decompressFromUint8Array(decoded);
+  const decompressed = LZString.decompressFromBase64(compressedProps);
   return JSON.parse(decompressed);
 }
 
-const cache = createCache();
+const cache = createCache({ key: "react-ssr" });
 
 ReactDOM.render(
   <CacheProvider value={cache}>

packages/core/lib/webpack/material-ui.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '__REACT_SSR_APP__';
 import Page from '__REACT_SSR_PAGE__';
 
 const getProps = () => {
   const compressedProps = document.getElementById('react-ssr-script').dataset.props;
-  const decoded = URLSafeBase64.decode(compressedProps);
-  const decompressed = LZString.decompressFromUint8Array(decoded);
+  const decompressed = LZString.decompressFromBase64(compressedProps);
   return JSON.parse(decompressed);
 }
 

packages/core/lib/webpack/styled-components.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '__REACT_SSR_APP__';
 import Page from '__REACT_SSR_PAGE__';
 
 const getProps = () => {
   const compressedProps = document.getElementById('react-ssr-script').dataset.props;
-  const decoded = URLSafeBase64.decode(compressedProps);
-  const decompressed = LZString.decompressFromUint8Array(decoded);
+  const decompressed = LZString.decompressFromBase64(compressedProps);
   return JSON.parse(decompressed);
 }
 

packages/core/package.json

@@ -63,7 +63,6 @@
     "slash": "3.0.0",
     "terser-webpack-plugin": "5.3.6",
     "unionfs": "4.4.0",
-    "urlsafe-base64": "1.0.0",
     "webpack": "5.74.0",
     "webpack-dev-server": "4.10.1",
     "webpack-merge": "5.8.0"
@@ -81,7 +80,6 @@
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "@types/recursive-readdir": "^2.2.1",
-    "@types/urlsafe-base64": "^1.0.28",
     "@types/webpack": "^5.28.0",
     "cross-env": "^7.0.3",
     "express": "^4.18.1",

packages/core/src/helpers.ts

@@ -38,8 +38,11 @@ const getSsrConfig = (): Config => {
     staticViews: [],
   };
   const ssrConfigPath = path.join(cwd, 'ssr.config.js');
+  const ssrConfigCjsPath = path.join(cwd, 'ssr.config.cjs');
   if (existsSync(ssrConfigPath)) {
     return Object.assign(defaultConfig, require(ssrConfigPath));
+  } else if (existsSync(ssrConfigCjsPath)) {
+    return Object.assign(defaultConfig, require(ssrConfigCjsPath));
   } else {
     return defaultConfig;
   }

packages/core/src/optimize/webpack.config.ts

@@ -49,6 +49,7 @@ const prodConfig: webpack.Configuration = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.REACT_SSR_ENV': JSON.stringify('production'),
     }),
   ],
 };

packages/core/src/render/index.tsx

@@ -3,7 +3,6 @@ import path from 'path';
 import React from 'react';
 import slash from 'slash';
 import LZString from 'lz-string';
-import URLSafeBase64 from 'urlsafe-base64';
 import App from '../components/App';
 import Document from '../components/Document';
 import {
@@ -96,8 +95,7 @@ const getRenderToStringMethod = async () => {
 
 const compressProps = (props: any) => {
   const packed = JSON.stringify(props);
-  const compressed = Buffer.from(LZString.compressToUint8Array(packed));
-  return URLSafeBase64.encode(compressed);
+  return LZString.compressToBase64(packed);
 }
 
 export default async function render(file: string, props: any): Promise<string> {

packages/core/src/render/stringify/emotion.tsx

@@ -8,12 +8,12 @@ import {
 
 const Head = require('./head');
 
-const { CacheProvider } = require('@emotion/core');
+const { CacheProvider } = require('@emotion/react');
 const emotionCache = require('@emotion/cache');
-const emotionServer = require('create-emotion-server');
+const emotionServer = require('@emotion/server/create-instance');
 const createCache = emotionCache.default || emotionCache;
 const createEmotionServer = emotionServer.default || emotionServer;
-const cache = createCache();
+const cache = createCache({ key: "react-ssr" });
 const { extractCritical } = createEmotionServer(cache);
 
 export default (app: React.ReactElement, pageId: string, props: string) => {