Styles loaded after initial render in production mode using ant design with less #8826

clement-faure · 2019-09-22T21:12:24Z

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.

clement-faure · 2019-09-23T16:55:02Z

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 !

carlosbaraza · 2019-09-24T14:39:18Z

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.

clement-faure · 2019-10-07T13:12:14Z

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.

LBC100 · 2019-10-08T08:58:59Z

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

LBC100 · 2019-10-09T02:44:08Z

不确定这是否有帮助，但我可以通过以下方式导入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 · 2019-10-15T03:38:54Z

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?

clement-faure · 2019-10-15T06:13:36Z

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

MihaiWill · 2019-10-18T14:29:22Z

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

clement-faure · 2019-10-19T08:04:16Z

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

Yes it's working well using my previous comment !

Timer · 2020-01-21T13:57:01Z

Duplicate of #9830

balazsorban44 · 2022-01-28T20:05:57Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added good first issue Easy to fix issues, good for newcomers help wanted labels Sep 23, 2019

Timer marked this as a duplicate of #9830 Jan 21, 2020

Timer closed this as completed Jan 21, 2020

This comment has been minimized.

Sign in to view

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styles loaded after initial render in production mode using ant design with less #8826

Styles loaded after initial render in production mode using ant design with less #8826

clement-faure commented Sep 22, 2019

clement-faure commented Sep 23, 2019

carlosbaraza commented Sep 24, 2019 •

edited

Loading

clement-faure commented Oct 7, 2019

LBC100 commented Oct 8, 2019

LBC100 commented Oct 9, 2019

LBC100 commented Oct 15, 2019

Examples bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

clement-faure commented Oct 15, 2019 •

edited

Loading

MihaiWill commented Oct 18, 2019

clement-faure commented Oct 19, 2019

Timer commented Jan 21, 2020

This comment has been minimized.

balazsorban44 commented Jan 28, 2022

Styles loaded after initial render in production mode using ant design with less #8826

Styles loaded after initial render in production mode using ant design with less #8826

Comments

clement-faure commented Sep 22, 2019

Examples bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

clement-faure commented Sep 23, 2019

carlosbaraza commented Sep 24, 2019 • edited Loading

clement-faure commented Oct 7, 2019

LBC100 commented Oct 8, 2019

LBC100 commented Oct 9, 2019

LBC100 commented Oct 15, 2019

Examples bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

clement-faure commented Oct 15, 2019 • edited Loading

MihaiWill commented Oct 18, 2019

clement-faure commented Oct 19, 2019

Timer commented Jan 21, 2020

This comment has been minimized.

balazsorban44 commented Jan 28, 2022

carlosbaraza commented Sep 24, 2019 •

edited

Loading

clement-faure commented Oct 15, 2019 •

edited

Loading