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...

Read full post

Reza Abdi • Dec 22 '20

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

Arch.h • Apr 15 '21

After I run:
npm i webpack@webpack-4

the error disappeared.

uncleilia • Feb 28 '21 • 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

Nick Beukema • Dec 21 '20

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.

Siddiqui Affan • Aug 25 '21

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",

dmamira • Jul 19 '20

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

Burhanuddin Udaipurwala • Jul 21 '20

Sure. Go ahead!

dmamira • Jul 23 '20

Thank you!
blog.dai.gd/posts/sxsssie5k

isaack okello brian • Aug 30 '20

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";

Burhanuddin Udaipurwala • Aug 30 '20

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

Teejay85 • May 8 '21

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?

isaack okello brian • Aug 30 '20

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

Burhanuddin Udaipurwala • Aug 30 '20

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

isaack okello brian • Aug 30 '20

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

Joel Grenon • Feb 1 '21 • 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 :)