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...
For further actions, you may consider blocking this person and/or reporting abuse
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 errorCannot find module 'webpack'
Also I have tried installing
webpack
package an it did nothingHope find some Help
After I run:
npm i webpack@webpack-4
the error disappeared.
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
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",
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 withinantd.less
, make sure you install theless
package targeted at version^3.12.2
.It looks like version
^4.0.0
is installed by default and triggers the following error:May I translate this article into Japanese and post it on my blog?
Actually, in Japan, there are few articles about Ant Design.
Sure. Go ahead!
Thank you!
blog.dai.gd/posts/sxsssie5k
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
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
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?
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 :)
Yarn start not working, sorry Newbie here. Also can you show me how to install and use storybook in this project?
Have you installed yarn on your computer? You can also npm if you haven't.
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
This is great! Have you figured out switching themes from the client side yet?
I resolved using it:
npmjs.com/package/next-plugin-antd...
Helpful!
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
Hi Burhanuddin
While working with Antd, it says:
snipboard.io/VcfQSN.jpg
Could we fix this without removing Strict mode?
I also get this error