How to use the react-jss/lib/JssProvider.default function in react-jss

/* eslint-disable react/prop-types, react/no-danger...*/

const React = require('react');
const { renderToString } = require('react-dom/server');
const JssProvider = require('react-jss/lib/JssProvider').default;
const getPageContext = require('./src/getPageContext').default;

function replaceRenderer({
    bodyComponent,
    replaceBodyHTMLString,
    setHeadComponents
}) {
    // Get the context of the page to collect side effects
    const muiPageContext = getPageContext();

    const bodyHTML = renderToString(
        
            {bodyComponent}
        
    );

/* eslint-disable react/no-danger */

const React = require('react');
const { renderToString } = require('react-dom/server');
const JssProvider = require('react-jss/lib/JssProvider').default;
const getPageContext = require('./src/getPageContext').default;

function replaceRenderer({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) {
  // Get the context of the page to collected side effects.
  const muiPageContext = getPageContext();

  const bodyHTML = renderToString(
    {bodyComponent},
  );

  replaceBodyHTMLString(bodyHTML);
  setHeadComponents([

import autoprefixer from 'autoprefixer';
import Document, {Head, Main, NextDocumentContext, NextScript} from 'next/document';
import postcss from 'postcss';
import * as React from 'react';

import {StylesContext} from '../client/styles/StylesContext';

const prefixer = postcss([autoprefixer as any]);

// tslint:disable-next-line
const JssProvider = require('react-jss/lib/JssProvider').default;

const generateCss = async (css: string): Promise => {
    if (process.env.NODE_ENV === 'production') {
        return (await prefixer.process(css, {from: undefined})).css;
    }
    return css;
};

type ContextWithLocale = NextDocumentContext & {req: {locale: string; localeDataScript: string}};

export default class extends Document {
    static async getInitialProps({renderPage, req: {locale, localeDataScript}}: ContextWithLocale) {
        const pageContext = StylesContext.getPageContext('dark');
        const page = renderPage((Component: any) => (props) => (

/* eslint-disable react/no-danger */

const React = require('react');
const { renderToString } = require('react-dom/server');
const JssProvider = require('react-jss/lib/JssProvider').default;
const getPageContext = require('./src/getPageContext').default;

function replaceRenderer({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) {
  // Get the context of the page to collected side effects.
  const muiPageContext = getPageContext();

  const bodyHTML = renderToString(
    {bodyComponent},
  );

  replaceBodyHTMLString(bodyHTML);
  setHeadComponents([

import {CssBaseline, MuiThemeProvider, PaletteType} from '@material-ui/core';
import * as React from 'react';

import {AppFrame} from '../modules/common/components';
import {paletteType, savePaletteType, ThemeContext, ThemeContextType} from '../contexts';
import {PageContext, StylesContext} from '../styles/StylesContext';

// tslint:disable-next-line
const JssProvider = require('react-jss/lib/JssProvider').default;

export const withMaterialUi = (BaseComponent: React.ComponentClass & {getInitialProps?(ctx: any): Promise}) => {
    interface Props {}

    interface State extends ThemeContextType {
        readonly pageContext: PageContext;
    }

    class Component extends React.Component {
        constructor(props: Props, context: any) {
            super(props, context);
            this.state = {
                paletteType,
                pageContext: StylesContext.getPageContext(paletteType),
                toggleTheme: this.toggleTheme,
            };

import { createMuiTheme, createGenerateClassName, MuiThemeProvider } from "@material-ui/core/styles";
import { generateFullHTML } from "../helpers/htmlWrapper";
import CssInjector from "../helpers/cssInjector";
import { ConnectedRootRoutes as RootRoutes, routesMap } from "../routes";
import StoreManager from "../store";
import getResponseObjectForRobot from "./handleRobots";
import * as DeployConfig from "../../scripts/deploy/config";
import { initialState } from "../reducers";
import handleSiteMapRequest from "./handleSitemap";
import { ACTION_TYPES } from "../actions/actionTypes";
import getQueryParamsObject from "../helpers/getQueryParamsObject";
import { TIMEOUT_FOR_SAFE_RENDERING } from "../api/pluto";
import { serveOpenSearchXML } from "./serveOpenSearchXml";
const AWSXRay = require("aws-xray-sdk");
const { SheetsRegistry } = require("react-jss/lib/jss");
const JssProvider = require("react-jss/lib/JssProvider").default;
const cloudwatch = new AWS.CloudWatch();

type RENDERING_TYPE = "NORMAL RENDERING" | "ERROR HANDLING RENDERING" | "FALLBACK RENDERING";

export interface SSRResult {
  html: string;
  statusCode?: number;
}

export interface ServerSideRenderParams {
  requestPath: string;
  scriptVersion: string;
  queryParamsObject?: object;
  version?: string;
  headers?: any;
}

import { createMuiTheme, createGenerateClassName, MuiThemeProvider } from "@material-ui/core/styles";
import { generateFullHTML } from "../helpers/htmlWrapper";
import CssInjector from "../helpers/cssInjector";
import { ConnectedRootRoutes as RootRoutes, routesMap } from "../routes";
import StoreManager from "../store";
import getResponseObjectForRobot from "./handleRobots";
import * as DeployConfig from "../../scripts/deploy/config";
import { initialState } from "../reducers";
import handleSiteMapRequest from "./handleSitemap";
import { ACTION_TYPES } from "../actions/actionTypes";
import getQueryParamsObject from "../helpers/getQueryParamsObject";
import { TIMEOUT_FOR_SAFE_RENDERING } from "../api/pluto";
import getExpUserType, { USER_EXPERIMENT_TYPE_KEY } from "../helpers/getExpUserType";
const AWSXRay = require("aws-xray-sdk");
const { SheetsRegistry } = require("react-jss/lib/jss");
const JssProvider = require("react-jss/lib/JssProvider").default;
const cloudwatch = new AWS.CloudWatch();

type RENDERING_TYPE = "NORMAL RENDERING" | "ERROR HANDLING RENDERING" | "FALLBACK RENDERING";

export interface SSRResult {
  html: string;
  statusCode?: number;
}

export interface ServerSideRenderParams {
  requestUrl: string;
  scriptVersion: string;
  queryParamsObject?: object;
  version?: string;
  headers?: any;
}

import * as ReactGA from 'react-ga';
import * as ReactDom from 'react-dom';
import { Store, AnyAction } from 'redux';
import { Provider } from 'react-redux';
import { MuiThemeProvider, createMuiTheme, createGenerateClassName } from '@material-ui/core/styles';
import EnvChecker from './helpers/envChecker';
import ErrorTracker from './helpers/errorHandler';
import { ConnectedRootRoutes as RootRoutes } from './routes';
import StoreManager from './store/store';
import { ACTION_TYPES } from './actions/actionTypes';
import { AppState } from './reducers';
import { getCurrentPageType } from './components/locationListener';
import { ThunkDispatch } from 'redux-thunk';
import { getGAId, getOptimizeId } from './helpers/handleGA';
const StyleContext = require('isomorphic-style-loader/StyleContext');
const JssProvider = require('react-jss/lib/JssProvider').default;
declare var Sentry: any;
declare var FB: any;

interface LoadScriptOptions {
  src: string;
  crossOrigin?: string;
  onLoad?: () => void;
}

function loadScript(options: LoadScriptOptions) {
  const script = document.createElement('script');
  script.src = options.src;
  if (options.crossOrigin) {
    script.crossOrigin = options.crossOrigin;
  }
  if (options.onLoad) {

import { UAParser } from 'ua-parser-js';
import { matchPath, StaticRouter } from 'react-router-dom';
import { createMuiTheme, createGenerateClassName, MuiThemeProvider } from '@material-ui/core/styles';
import * as ReactDOMServer from 'react-dom/server';
import { ChunkExtractor } from '@loadable/server';
import StoreManager from '../app/store/serverStore';
import { ConnectedRootRoutes as RootRoutes, routesMap } from '../app/routes';
import { ACTION_TYPES } from '../app/actions/actionTypes';
import { generateFullHTML } from '../app/helpers/htmlWrapper';
import PlutoAxios from '../app/api/pluto';
import { setDeviceType, UserDevice } from '../app/components/layouts/reducer';
import { parse } from 'cookie';
import { SignInResult } from '../app/api/types/auth';
import { getAxiosInstance } from '../app/api/axios';
const StyleContext = require('isomorphic-style-loader/StyleContext');
const JssProvider = require('react-jss/lib/JssProvider').default;
const { SheetsRegistry } = require('react-jss/lib/jss');
const statsFile = path.resolve(__dirname, '../client/loadable-stats.json');

function isExpressRequest(req: Request | LambdaProxy.Event): req is Request {
  return !!(req as Request).originalUrl;
}

function getFullUrl(req: Request | LambdaProxy.Event) {
  if (isExpressRequest(req)) {
    return req.originalUrl;
  }

  if (!req.queryStringParameters) {
    return req.path;
  }