Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FOUC with styled-jsx on Firebase Cloud Functions #3434

Closed
1 task done
mikemclin opened this issue Dec 10, 2017 · 12 comments
Closed
1 task done

FOUC with styled-jsx on Firebase Cloud Functions #3434

mikemclin opened this issue Dec 10, 2017 · 12 comments

Comments

@mikemclin
Copy link

mikemclin commented Dec 10, 2017 •
edited

  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I visit homepage and expect to see styled content immediately.

Current Behavior

Webpage does not immediately render styles in <style jsx> tags. It does however, render styles declared explicitly within a components style attribute. For example, in the code below, the text is blue on page load (immediately), but the .hello styles do not load immediately.

Steps to Reproduce (for bugs)

I am using Firebase Cloud Functions for the server portion of app. The .babelrc file is used both for next build and for a custom deployment step I need to perform to get the source files working on Cloud Functions. Firebase Cloud Functions do not install devDependencies, and it was complaining that both babel-runtime and styled-jsx were not found, so I added them to my dependency list.

// pages/index.js

export default () => (
  <div className='hello'>
    <p style={{ color: 'blue' }}>Hello World</p>
    <style jsx>{`
      .hello {
        font: 15px Helvetica, Arial, sans-serif;
        background: #eee;
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
      .hello:hover {
        background: #ccc;
      }
    `}</style>
  </div>
);
// .babelrc

{
  "presets": [
    ["env", { "targets": { "node": "6.11" } }],
    "next/babel",
    "stage-0"
  ],
  "plugins": [
    "transform-inline-environment-variables",
    ["styled-jsx/babel", { "optimizeForSpeed": true }]
  ]
}
// from package.json

{
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-inline-environment-variables": "^0.2.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "firebase-admin": "^5.5.1",
    "firebase-functions": "^0.7.3",
    "next": "^4.2.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "styled-jsx": "^2.2.1"
  },
}
@mikemclin
Copy link
Author

Styles are rendered correctly when I run the app locally using next command.

@dmalik
Copy link

dmalik commented Dec 15, 2017

Got same issue.

@mikemclin
Copy link
Author

mikemclin commented Dec 20, 2017 •
edited

I'm still searching for a solution on this. Haven't been able to find one yet. It appears this boilerplate project ananddayalan/nextjs-in-firebase-with-bootstrap is having the same issue. You can see his FOUC on their demo: https://nextjs-in-firebase-functions.firebaseapp.com/ (note that the layout is controlled via style-jsx, the rest of the styles are coming from a CSS file)

@mikemclin mikemclin mentioned this issue Dec 20, 2017
Open
@JohnWooS
Copy link

JohnWooS commented Jan 2, 2018

Anybody found a solution for this? I also got the same issue.

@JohnWooS
Copy link

JohnWooS commented Jan 2, 2018

@mikemclin Did you found a solution for this?

@mikemclin
Copy link
Author

@JohnWooS No. I will definitely post back here if I find something. I've tried borrowing config from the Firebase Functions Next.js Example and literally any type of Firebase/Next.js boilerplate I could find on Github. No luck.

I'm sort of just hoping for an official word at this point. I just wish I knew if it was broken, or if I haven't found the magic config sauce yet (even if it is hacky).

@jthegedus
Copy link
Contributor

@mikemclin Have you found any Nextjs/Firebase project where this doesn't occur but where there's no discernable difference in the codebase?

@mikemclin
Copy link
Author

@jthegedus No. I have never seen styled-jsx work with SSR on Firebase Cloud Functions.

@andyeskridge
Copy link

I have been playing around with this and I think I have fixed it for myself. I created a custom _document.js but it just implements the basic Document functionality.

import Document, { Head, Main, NextScript } from "next/document";
import flush from "styled-jsx/server";

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage();
    const styles = flush();
    return { html, head, errorHtml, chunks, styles };
  }

  render() {
    return (
      <html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

I then included styled-jsx as an actual dependency of my app. This combination seemed to fix my first FOUC that I would see on loading.

@mikemclin
Copy link
Author

@andyeskridge solution worked for me. I simply added the _document.js file to my pages directory with the content he provided.

I also tried to create a _document.js file that only contained...

module.exports = require('next/document');

...but it failed to render SSR styles.

@lacymorrow
Copy link
Contributor

@mikemclin I just solved this issue as well, the important bit from @andyeskridge's custom _document.js is the flush() after calling renderPage().

@hugotox hugotox mentioned this issue Feb 22, 2018
Closed
@timneutkens
Copy link
Member

I'm guessing this might have been solved by Next.js 5 (universal webpack)

@NathanielHill NathanielHill mentioned this issue Jun 17, 2018
Closed
@jthegedus jthegedus mentioned this issue Jun 19, 2018
Closed
@lock lock bot locked as resolved and limited conversation to collaborators May 25, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@andyeskridge @dmalik @lacymorrow @mikemclin @timneutkens @jthegedus @JohnWooS