Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

After google sign in css got broken in nextJs

See original GitHub issue

My web is showing the exact styles in dev and prod versions before firebase authentication with Google provider. But, after signing all CSS got broken.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate, if it is duplicate then I am sorry.

Current Behavior 😯

This is after sign in: after

Expected Behavior 🤔

This is before sign in and It should show the same as after login: before

Steps to Reproduce 🕹

Steps:

I’ve integrated the project as per the example given in this repo

Context 🔦

My Environment 🌎

_app.js file:

import React from "react";
import PropTypes from "prop-types";
import Head from "next/head";
import dynamic from "next/dynamic";
import { CacheProvider } from "@emotion/core";
import createCache from "@emotion/cache";
import ContextProvider from "../src/state/ContextProvider";

import "nprogress/nprogress.css";

export const cache = createCache();

const TopProgressBar = dynamic(
  () => {
    return import("../src/components/TopProgressBar");
  },
  { ssr: false }
);

export default function MyApp(props) {
  const { Component, pageProps } = props;

  return (
    <CacheProvider value={cache}>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ContextProvider>
        <TopProgressBar />
        <Component {...pageProps} />
      </ContextProvider>
    </CacheProvider>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

_document.js file:

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import createEmotionServer from 'create-emotion-server';
import { muiLightTheme } from '../styles/theme';
import { cache } from './_app.js';

const { extractCritical } = createEmotionServer(cache);

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="bn">
        <Head>
          <meta name='application-name' content="MainlyCoding.com" />
          <meta name='apple-mobile-web-app-capable' content='yes' />
          <meta name='apple-mobile-web-app-status-bar-style' content='default' />
          <meta name='apple-mobile-web-app-title' content="MainlyCoding.com" />
          <meta name='description' content="Mainly Coding (মেইনলি কোডিং) is an AI-powered Personalized Online Learning Platform dedicated to learning and teaching Programming in Bangla." />
          <meta name='format-detection' content='telephone=no' />
          <meta name='mobile-web-app-capable' content='yes' />
          <meta name="theme-color" content={muiLightTheme.palette.primary.main} />

          <link rel='apple-touch-icon' sizes='180x180' href='/logo192.png' />
          <link rel='manifest' href='/manifest.json' />
          <link rel='shortcut icon' href='/favicon.ico' />
          <link rel='mask-icon' href='/logo192.png' color='#5bbad5' />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);
  const styles = extractCritical(initialProps.html);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
      <style
        key="emotion-style-tag"
        data-emotion-css={styles.ids.join(' ')}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: styles.css }}
      />,
    ],
  };
};

My next.config.js file is:

const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");

module.exports = 
  withCSS(
    withSass({
      enableSvg: true,
      webpack(config, options) {
        config.module.rules.push({
          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 100000,
            },
          },
        });
        config.resolve.extensions = ['.js', '.jsx'];
        return config;
      },
    })
);