fix(federated-css-react-ssr): avoid requiring remote LoaderContext during SSR startup; use passthrough provider server-side, real providers client-side

Author: ScriptedAlchemy

federated-css-react-ssr/shell-apps/css-jss/src/StyleProviders.js

@@ -1,3 +1,15 @@
-import LoaderContext1 from 'expose_css/LoaderContext';
+// Avoid requiring remote LoaderContext during SSR startup.
+// On the server, provide a passthrough provider; on the client, use remote providers.
+let providers;
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const LoaderContext1 = require('expose_css/LoaderContext');
+  providers = [LoaderContext1.StyleContext.Provider];
+} else {
+  // eslint-disable-next-line global-require
+  const React = require('react');
+  const Passthrough = ({ children }) => React.createElement(React.Fragment, null, children);
+  providers = [Passthrough];
+}
 
-export default [LoaderContext1.StyleContext.Provider];
+export default providers;

federated-css-react-ssr/shell-apps/css-scss/src/StyleProviders.js

@@ -1,4 +1,15 @@
-import LoaderContext1 from 'expose_css/LoaderContext';
-import LoaderContext2 from 'expose_scss/LoaderContext';
+let providers;
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const LoaderContext1 = require('expose_css/LoaderContext');
+  // eslint-disable-next-line global-require
+  const LoaderContext2 = require('expose_scss/LoaderContext');
+  providers = [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+} else {
+  // eslint-disable-next-line global-require
+  const React = require('react');
+  const Passthrough = ({ children }) => React.createElement(React.Fragment, null, children);
+  providers = [Passthrough];
+}
 
-export default [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+export default providers;

federated-css-react-ssr/shell-apps/jss-styled-components-css-module/src/StyleProviders.js

@@ -1,3 +1,13 @@
-import LoaderContext1 from 'expose_css_module/LoaderContext';
+let providers;
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const LoaderContext1 = require('expose_css_module/LoaderContext');
+  providers = [LoaderContext1.StyleContext.Provider];
+} else {
+  // eslint-disable-next-line global-require
+  const React = require('react');
+  const Passthrough = ({ children }) => React.createElement(React.Fragment, null, children);
+  providers = [Passthrough];
+}
 
-export default [LoaderContext1.StyleContext.Provider];
+export default providers;

federated-css-react-ssr/shell-apps/less-scss/src/StyleProviders.js

@@ -1,4 +1,15 @@
-import LoaderContext1 from 'expose_less/LoaderContext';
-import LoaderContext2 from 'expose_scss/LoaderContext';
+let providers;
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const LoaderContext1 = require('expose_less/LoaderContext');
+  // eslint-disable-next-line global-require
+  const LoaderContext2 = require('expose_scss/LoaderContext');
+  providers = [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+} else {
+  // eslint-disable-next-line global-require
+  const React = require('react');
+  const Passthrough = ({ children }) => React.createElement(React.Fragment, null, children);
+  providers = [Passthrough];
+}
 
-export default [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+export default providers;

federated-css-react-ssr/shell-apps/scss-tailwind-css/src/StyleProviders.js

@@ -1,4 +1,15 @@
-import LoaderContext1 from 'expose_tailwind_css/LoaderContext';
-import LoaderContext2 from 'expose_scss/LoaderContext';
+let providers;
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const LoaderContext1 = require('expose_tailwind_css/LoaderContext');
+  // eslint-disable-next-line global-require
+  const LoaderContext2 = require('expose_scss/LoaderContext');
+  providers = [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+} else {
+  // eslint-disable-next-line global-require
+  const React = require('react');
+  const Passthrough = ({ children }) => React.createElement(React.Fragment, null, children);
+  providers = [Passthrough];
+}
 
-export default [LoaderContext1.StyleContext.Provider, LoaderContext2.StyleContext.Provider];
+export default providers;