After google sign in css got broken in nextJs #23317

md-abdul-halim-rafi · 2020-10-30T04:29:16Z

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:

Expected Behavior 🤔

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

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;
      },
    })
);

Tech	Version
Material-UI	v^5.0.0-alpha.14
React	v17.0.1
Browser	Chrome

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2020-10-30T09:50:06Z

@md-abdul-halim-rafi Could you provide a minimal and live reproduction? This would help a lot, we can't help with only code snippets, there are too many external dependencies that could influence it.

md-abdul-halim-rafi · 2020-10-30T10:06:49Z

@md-abdul-halim-rafi Could you provide a minimal and live reproduction? This would help a lot, we can't help with only code snippets, there are too many external dependencies that could influence it.

Thanks @oliviertassinari for your kind response. I deployed it to vercel. Here is the live URL

oliviertassinari · 2020-10-30T10:15:00Z

@md-abdul-halim-rafi This isn't a reproduction, it needs to contain as little code as possible (not your app) it also need to pin-point where the issue is coming from.

md-abdul-halim-rafi · 2020-10-30T14:11:52Z

t a reproduction, it needs to contain as little code as possible (not

Sorry for the inconvenience, I tried to create a reproduction with this repo.

What I found, the main problem is created by a component named BadgeNotification. There I used makeStyles to add some styling rules. But, anything I add, it behaves weird after the login.

Hopefully, this will help you to find my problem.

support · 2020-10-30T15:00:17Z

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

oliviertassinari · 2020-10-30T15:01:37Z

Tip: hydration & users

md-abdul-halim-rafi · 2020-10-30T15:04:37Z

Tip: hydration & users

Sorry, I didn't understand. Can you please elaborate it?

oliviertassinari · 2020-10-30T15:06:35Z

@md-abdul-halim-rafi Sorry, I can't, it would create a perverse incentive. You can ask on StackOverflow.

md-abdul-halim-rafi added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 30, 2020

oliviertassinari added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 30, 2020

oliviertassinari added support: Stack Overflow Please ask the community on Stack Overflow and removed status: waiting for author Issue with insufficient information labels Oct 30, 2020

support bot closed this as completed Oct 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After google sign in css got broken in nextJs #23317

After google sign in css got broken in nextJs #23317

md-abdul-halim-rafi commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

support bot commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

After google sign in css got broken in nextJs #23317

After google sign in css got broken in nextJs #23317

Comments

md-abdul-halim-rafi commented Oct 30, 2020

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

My Environment 🌎

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

support bot commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020

md-abdul-halim-rafi commented Oct 30, 2020

oliviertassinari commented Oct 30, 2020