Next.js: Improve example of with-ant-design-less

[nenjamin2405]

Bug report

Describe the bug

The with-ant-design-less example is lack off hot reloading and client-side rendering for css

To Reproduce

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

Hot reloading problem:

1. Go to 'asserts/antd-custom.less'
2. Change the primary color
3. Save
4. The new primary color is not applied via hot reloading

Client-side rendering for css:

1. Create a new page called "test.js" and less file called "test.less" then define simple css in it (e.g p {color: red})
2. Import style "test.less" file into "test.js" and define a paragrah tag for testing
3. Create a Link component inside index page to navigate to test page
4. When navigating from index.js to test.js, although the test.less is merged into style.css file in /_next/static/style.css, the paragraph tag was not applied red color . If I refresh the test page, everything works fine

Expected behavior

I really appreciate if anyone can tell me the appropriate way to use Ant design in Next.js with custom less style with hot reloading, client-side rendering by answering the questions below:

1. What should I use to create an Ant Design Layout for all pages (the new implementation _app.js or _document.js?). I've tried to use this example (using _document.js and add ant design style into style tag), but the ant design icon part not working.
2. I want to import .less style for each page, e.g pageA has pageA.less ,page B has pageB.less, how can I do that ?

System information

• OS: [e.g. Ubuntu]
• Browser (if applies) [e.g. chrome]
• Version of Next.js: [e.g. 6.0.3]

[delikat]

Hi @nenjamin2405, regarding your first issue, I got HMR of antd LESS overrides working by defining a custom pages/_document.js and moving the LESS import to pages/index.js. you can see a working example here: https://github.com/delikat/next.js/commit/b6cefcdbb15bb16ad70706ca28307b7ef126e266

[nenjamin2405]

Thanks for your support @delikat, but with that implementation, I already had a problem in page loading time (performance issue) while navigating between pages, due to the fact that it must repeatedly import a whole Antd less file in every single page. So I am really confused and wonder what is the proper way in using Antd that meet my above requirements (import and load ant design layout once in _app.js or _document.js, then each page has its own less file which doesn't contain ant design import in it).

[YUFENGWANG]

wired, same problem

[TheAlemazing]

Any update on this?

[caprica-Six]

quite painful, still issues...

[timneutkens]

So why not contribute to the example? 🤔

[caprica-Six]

@timneutkens - Yeah, I know good point. Been trying to figure this out. Looks like custom less is fine to compile with HMR, but the theme-ing (vars) with 'antd' has the HMR issue. Came across this article where I tried to implement the "yarn add antd-theme-webpack-plugin", but still not luck. Gonna do a working repo, hopefully once fixed..

[nelsera]

Has anyone found a workaround?

[JoaoCnh]

We should be using modularized ant-design with this babel config:

["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]

I've been trying to get it to work but with no luck. With the inclusion of the "libraryDirectory": "es" it throws a build error. For example if I use the Layout component this error is thrown:

(function (exports, require, module, __filename, __dirname) { import Layout from './layout';
                                                                     ^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18) type: 'SyntaxError', '$error': '$error' }

I've been trying to make babel-preset-env work for it to work with es modules but it doesn't seem to work. Can anyone chime in?

[Timer]

Duplicate of #9830