Next.js: Styles loaded after initial render in production mode using ant design with less

Created on 22 Sep 2019 · 10Comments · Source: vercel/next.js

Examples bug report

Describe the bug

When using a complete copy of with-ant-design-less sample, styles are loaded after an initial page render when nextjs is built to production

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
Clone the repository
Install dependencies and build in production mode
Start in production mode

Expected behavior

Styles should be loaded before initial render

Screenshots

65225171-edd33d80-dac4-11e9-84d2-9d5f0fb7903d

System information

OS: macOS
Browser (if applies) chrome
Version of Next.js: latest

Additional context

I tried to deploy using my nextjs app using now and same issue is happening.

good first issue

Source

clement-faure

👍6

Most helpful comment

I am experiencing the same problem. Request a solution. help me

LBC100 on 8 Oct 2019

👍4

All 10 comments

https://spectrum.chat/next-js/general/with-ant-design-less-style-flash-on-load~521fe7f8-1ba7-4da0-bf6e-6a81921ae9a5

Overriding _app.js is a way to fix it !

clement-faure on 23 Sep 2019

😕2

Not sure this would help, but I import Antd in the following way, without messing up with the webpack config:

styles/antd.less:

@import "../../node_modules/antd/dist/antd.less";
@import "./antd-variables.less";

next.config.js:

const withPlugins = require("next-compose-plugins");
const less = require("@zeit/next-less");

module.exports = withPlugins([
  [less, { lessLoaderOptions: { javascriptEnabled: true } }]
]);

_app.js:

import "../styles/antd/antd.less";

...

This seems to work just fine.

carlosbaraza on 24 Sep 2019

😕2 👎2

https://spectrum.chat/next-js/general/with-ant-design-less-style-flash-on-load~521fe7f8-1ba7-4da0-bf6e-6a81921ae9a5

Overriding _app.js is a way to fix it !

No really working... For exemple, when i'm using Drawer from ant design, transition isn't working.

clement-faure on 7 Oct 2019

I am experiencing the same problem. Request a solution. help me

LBC100 on 8 Oct 2019

👍4

不确定这是否有帮助，但我可以通过以下方式导入Antd，而不会弄乱webpack配置：

styles/antd.less：
@import "../../node_modules/antd/dist/antd.less";
@import "./antd-variables.less";
next.config.js：
const  withPlugins  =  require（“ next-compose-plugins ”）;
const  less  =  require（“ @ zeit / next-less ”）;

模块。出口 =  withPlugins（[
  [less，{lessLoaderOptions ： {javascriptEnabled ： true }}]
]）;
_app.js：
导入 “ ../styles/antd/antd.less ” ;

...
这似乎工作正常。

My latest experiment, doesn't work

LBC100 on 9 Oct 2019

Examples bug report

Describe the bug

When using a complete copy of with-ant-design-less sample, styles are loaded after an initial page render when nextjs is built to production

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less

Clone the repository

Install dependencies and build in production mode

Start in production mode

Expected behavior

Styles should be loaded before initial render

Screenshots

System information

OS: macOS

Browser (if applies) chrome

Version of Next.js: latest

Additional context

I tried to deploy using my nextjs app using now and same issue is happening.

Has your problem been solved?

LBC100 on 15 Oct 2019

😕1

I manage to find a temporary solution by not putting style element in Next.Js Head. I don't know why, but when putting style element in Head, it is working at initial render but when navigation between page using Link (from next/link), style element is happened again in the tree.

    return (
        <Layout className="custom-layout">
            {/* Fixes flash of unstyled content for first load, not in NextJs because causing issue */}
            <style
                id='holderStyle'
                dangerouslySetInnerHTML={{
                    __html: `
          *, *::before, *::after {
            transition: none!important;
          }
        `
                }}
            />
            {/* Enf fixing flash unstyled content */}
            <Head>
                {/* SEO */}
             ....
            </Head>
            <Component {...pageProps} />
        </Layout>
    );
}

And before exporting my class

if (typeof window !== "undefined") { window.onload = () => { document.getElementById("holderStyle").remove(); }; }

clement-faure on 15 Oct 2019

@cfaure004 is the solution still working for you? I tried but, the Antd still loads with a flash....