DEV Community

Using Ant Design with NextJS (custom variables for Ant Design)

Burhanuddin Udaipurwala on June 18, 2020

Day1: Started a new project to learn NextJS. Faced my first hurdle today when trying to setup a NextJS project with Ant Design. Using Ant Design wi...
Collapse
 
rezaabdi78 profile image
Reza Abdi

Thanks for guide!
I have an issue and it's that after the last part (Next.config.js)
I can not run my app and when I run npm run dev it encounters this error
Cannot find module 'webpack'
Also I have tried installing webpack package an it did nothing
Hope find some Help

Collapse
 
archcra profile image
Arch.h

After I run:
npm i webpack@webpack-4

the error disappeared.

Collapse
 
uncleilia profile image
uncleilia • Edited

been facing the same issue for a while and haven't found any answers, hope someone helps because I'm loosing my mind over this

Collapse
 
affanthebest profile image
Siddiqui Affan

Hey, I followed everything written in the post. But still can't make it run.

Error that I got:

ready - started server on 0.0.0.0:3000, url: localhost:3000
info - Using webpack 5. Reason: Enabled by default nextjs.org/docs/messages/webpack5
TypeError: Cannot set property 'styles' of undefined
at module.exports (C:\Users\name\Projects\nextjs\node_modules\@zeit\next-css\css-loader-config.js:25:56)
at Object.webpack (C:\Users\name\Projects\nextjs\node_modules\@zeit\next-css\index.js:15:36)
at Object.getBaseWebpackConfig as default
at async Promise.all (index 0)
at async HotReloader.start (C:\Users\name\Projects\nextjs\node_modules\next\dist\server\dev\hot-reloader.js:278:25)
at async DevServer.prepare (C:\Users\name\Projects\nextjs\node_modules\next\dist\server\dev\next-dev-server.js:252:9)
at async C:\Users\name\Projects\nextjs\node_modules\next\dist\cli\next-dev.js:121:9

Depndencies installed:
"@zeit/next-css": "^1.0.1",
"@zeit/next-less": "^0.0.4",
"@zeit/next-sass": "^0.0.4",
"antd": "^4.16.13",
"babel-plugin-import": "^1.13.3",
"bootstrap": "^5.1.0",
"less": "^4.1.1",
"mongodb": "^4.1.1",
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",

Collapse
 
nickbeukema profile image
Nick Beukema

Thanks for the guide! Just as an FYI for anyone following this as well, and running into issues with importing the ~antd/dist/antd.less file within antd.less, make sure you install the less package targeted at version ^3.12.2.

It looks like version ^4.0.0 is installed by default and triggers the following error:

error - ./styles/antd.less

.@{ant-prefix}-anchor {
  .reset-component;
                ^
Unrecognized input. Possibly missing '(' in mixin call.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dmamira profile image
dmamira

May I translate this article into Japanese and post it on my blog?
Actually, in Japan, there are few articles about Ant Design.

Collapse
 
burhanuday profile image
Burhanuddin Udaipurwala

Sure. Go ahead!

Collapse
 
dmamira profile image
dmamira
Collapse
 
kulgeek profile image
isaack okello brian

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders

@import "~antd/dist/antd.less";

Collapse
 
burhanuday profile image
Burhanuddin Udaipurwala

Hey, make sure you copied next.config.js file correctly. Less files require a special loader to be used. Also recheck that you performed all steps

Collapse
 
tommyjackson85 profile image
Teejay85

I am having this problem too but I copied and pasted your next.config.js file. Is there a specific folder this file should go under?

Collapse
 
reflyxio profile image
Joel Grenon • Edited

Nice detailed solution. thanks. Did you have the chance to use it with next@10? Seems that there's an issue with webpack and mini-css-extract-plugin when using latest version of next. I just reverted back to version 9 and it's working like a charm :)

Collapse
 
kulgeek profile image
isaack okello brian

Yarn start not working, sorry Newbie here. Also can you show me how to install and use storybook in this project?

Collapse
 
burhanuday profile image
Burhanuddin Udaipurwala

Have you installed yarn on your computer? You can also npm if you haven't.

Collapse
 
kulgeek profile image
isaack okello brian

It worked thank you so much. Btw is it an idea that you can create a boilerplate on git hub for antd and storybook? Think more like an enterprise boilerplate for UX designers who still learning the ropes to code. BTW thanks a mil for this

Collapse
 
rocinante89 profile image
Cillian Barron

This is great! Have you figured out switching themes from the client side yet?

Collapse
 
fabiomotta0311 profile image
Fabio Motta
Collapse
 
hasantezcan profile image
Hasan TEZCAN

Helpful!

Collapse
 
shakesbeardz profile image
Yahia Battach

Hi, thanks for the good article, do you know where to put the ConfigProvider
this one: ant.design/components/config-provider
it's for i18n

Collapse
 
oliverdeva profile image
oliverdevA

Hi Burhanuddin

While working with Antd, it says:
snipboard.io/VcfQSN.jpg

Could we fix this without removing Strict mode?

Collapse
 
kulgeek profile image
isaack okello brian

I also get this error