Upon Next v6 upgrade, global styles got broken #454

voxmachina · 2018-06-11T08:37:16Z

Do you want to request a feature or report a bug?

I want to report a Bug

What is the current behavior?

When upgrading to Next v6.0.3, my global styles have stopped working displaying the message: "styles is not defined", I'm currently using styled-jsx with styled-jsx-css-loader

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Upgrade application to Next 6.0.3
Follow the steps mentioned at the following link to update the Redux dependencies also: https://github.com/kirill-konshin/next-redux-wrapper#upgrade

Git repo with the use case in action, simple setup from scratch and it fails exactly the same:
https://github.com/voxmachina/nextjs-6-with-styled-jsx-demo

What is the expected behavior?

I would expect that the stylesheets would behave the same way as before and not break, note that only the "global" ones are failing, the others (scopped) are working ok as before.

Environment (include versions)

OS: macOS High Sierra (10.13.4)
Browser: Chrome 66.0.3359.181
styled-jsx (version): 2.2.6

Did this work in previous versions?

Yes, it did work before the upgrade

blackbing · 2018-06-11T15:04:18Z

I have similar problem. vercel/next.js#4239 (comment) has explained the correct way to config babel. But it can not be solved when running with jest.

check out this. vercel/next.js#4501 shows yarn dev and yarn build works correctly. but yarn test will break.

But I have no idea to address the problem.

voxmachina · 2018-06-12T02:01:56Z

Yap, thanks for the reference, just tried now @blackbing still the same error, doesn't solve it for me either :/

giuseppeg · 2018-06-13T09:31:35Z

it might be an issue with Babel 7, I think that a temporary workaround is to use CommonJS exports instead of ES6:

module.exports = css`
  div { color: red }
`

N4G1B4T0R · 2018-06-25T19:54:58Z

Hi Everyone! I tried to figure out this issue. How said @giuseppeg there is problem with Babel 7 and after 2 days I got it. So I just create "crutch". Here is my _document.js

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import JssProvider from 'react-jss/lib/JssProvider';
import flush from 'styled-jsx/server';
import getPageContext from '../src/getPageContext';
import baseStyles from '../styles/style.scss'

class MyDocument extends Document {
    render() {
        const { pageContext } = this.props;

        return (
            <html lang="en" dir="ltr" id="html">
            <Head>
                <title>InstaLazier</title>
                <meta charSet="utf-8" />
                {/* Use minimum-scale=1 to enable GPU rasterization */}
                <meta
                    name="viewport"
                    content={
                        'user-scalable=0, initial-scale=1, ' +
                        'minimum-scale=1, width=device-width, height=device-height'
                    }
                />
                {/* PWA primary color */}
                <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
                />

            </Head>
            <body>
            <Main />
            <NextScript />
            </body>
            </html>
        );
    }
}

MyDocument.getInitialProps = ctx => {
    // Resolution order
    //
    // On the server:
    // 1. page.getInitialProps
    // 2. document.getInitialProps
    // 3. page.render
    // 4. document.render
    //
    // On the server with error:
    // 2. document.getInitialProps
    // 3. page.render
    // 4. document.render
    //
    // On the client
    // 1. page.getInitialProps
    // 3. page.render

    // Get the context of the page to collected side effects.
    const pageContext = getPageContext();
    const page = ctx.renderPage(Component => props => (
        <JssProvider
            registry={pageContext.sheetsRegistry}
            generateClassName={pageContext.generateClassName}
        >
            <Component pageContext={pageContext} {...props} />
        </JssProvider>
    ));
   // const test = "<style>html{font-family:'Roboto',sans-serif;}body,h1,h2,h3,h4,h5,h6{font-size:15px;margin:0;line-height:24px;}body{margin:0;background-color:#FAFAFD;overflow-x:hidden;}body,html,#__next,#__next>div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;overflow-y:auto;overflow-x:hidden;}#next{background-color:red;}#__next,#__next>div,body,html{height:100%;}a{color:transparent;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}.b-icon{max-width:16px;width:100%;height:auto;}.b-icon--margin{margin-right:20px;}</style>"

    return {
        ...page,
        pageContext,
        styles: (
            <React.Fragment>
                <style
                    id="jss-server-side"
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
                />
                <style
                    dangerouslySetInnerHTML={{ __html: baseStyles.toString() }}
                />
                {flush() || null}

            </React.Fragment>
        ),
    };
};

export default MyDocument;

So I just added manually second

<style dangerouslySetInnerHTML={{ __html: baseStyles.toString() }/>

And after that everything work nice on next 6.0.3.
I dont know how it will work in production but i guess babel will figure out this issue in the near future.

giuseppeg · 2018-07-18T07:00:30Z

Probably we are re using AST nodes which instead we should clone.

giuseppeg · 2018-09-28T06:40:20Z

this was fixed in #470

giuseppeg modified the milestone: v3 Jul 18, 2018

giuseppeg mentioned this issue Jul 24, 2018

Fix external styles references #470

Merged

giuseppeg closed this as completed Sep 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upon Next v6 upgrade, global styles got broken #454

Upon Next v6 upgrade, global styles got broken #454

voxmachina commented Jun 11, 2018 •

edited

Loading

blackbing commented Jun 11, 2018 •

edited

Loading

voxmachina commented Jun 12, 2018

giuseppeg commented Jun 13, 2018

N4G1B4T0R commented Jun 25, 2018

giuseppeg commented Jul 18, 2018

giuseppeg commented Sep 28, 2018

Upon Next v6 upgrade, global styles got broken #454

Upon Next v6 upgrade, global styles got broken #454

Comments

voxmachina commented Jun 11, 2018 • edited Loading

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

What is the expected behavior?

Environment (include versions)

Did this work in previous versions?

blackbing commented Jun 11, 2018 • edited Loading

voxmachina commented Jun 12, 2018

giuseppeg commented Jun 13, 2018

N4G1B4T0R commented Jun 25, 2018

giuseppeg commented Jul 18, 2018

giuseppeg commented Sep 28, 2018

voxmachina commented Jun 11, 2018 •

edited

Loading

blackbing commented Jun 11, 2018 •

edited

Loading