Next.js Discord

Discord Forum

NextJs pages router cannot use Ant Design | App router works though

Unanswered
Rohu posted this in #help-forum
Open in Discord
RohuOP
I have discovered that running the latest public version of AntD and Nextjs I am unable to use Antd with the pages router but it works totally fine with the app router. (We're not ready to switch to app router)

Repo:
https://github.com/BaileyMillerSSI/next-antd-issues

Issue:
# App Router
Run npm install then npm run dev, navigate to the localhost page, see the button and icon display correctly.

# Pages Router
Run npm install then npm run dev, navigate to the localhost page, see that the console and webpage through a compile error.`
Specifically I see

/next-antd-issues/page-router-antd/node_modules/@ant-design/icons-svg/es/asn/AccountBookFilled.js:3
export default AccountBookFilled;
^^^^^^

SyntaxError: Unexpected token 'export'

26 Replies

RohuOP
That has no effect, I'll make that change and give a quick update
Same outcome
joulev
yeah then i don't know, sorry. perhaps a bug in antd's bundler, maybe you should report it to them. your pages router app code looks fine to me
RohuOP
Sadly I have reported it to them but things get even weird because I think Next is somewhat at fault. If I go down to version 14 of Next, this works totally fine
joulev
oh wow, weird
some bundling shenanigans here
i think in that case its best to remain in 14 for now until the people at antd investigate closely and come up with a root cause
RohuOP
That's where things get even weirder...
Next@14 has a security vulnerability ...
So we're being pushed at the company to upgrade off that version but we cannot because of this Antd problem
joulev
really? my apps running at 14.2.3 do not get any vulnerability alerts
next 15 is rc, not stable. bad idea to use it for big projects
RohuOP
Just base 14..0.0
joulev
just upgrade to latest next. 14.2.3 is the latest stable version and it has no known vulnerability
RohuOP
But I cannot because the lastest next cannot compile AntD :/
joulev
14.1.1 is the earliest stable version without known vulnerability btw
RohuOP
And the issues with Antd happen after 14.0.3
joulev
well, not much we can really do here.

that being said, the security vulnerability for v14.0.0 is for server actions, a feature not applicable for the pages router. so explain to the security team of your company that vulnerable code is not (and cannot) be used by the app
RohuOP
I can do that for now, it's just weird that something added in 14.0.3 broken AntD but I didn't see anything about it in that releases change log
joulev
yeah it's not supposed to break antd, but it unfortunately did break antd
actually, try this: add the antd package to https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages
i've seen many bundling problem fixed (directly or indirectly) by using transpilePackages
RohuOP
Oh I found this, looks like others have found the same issue on that version https://github.com/ant-design/ant-design/issues/46053
Interesting, adding all the transpile packages for all of Antd fixed it locally so far
joulev
So did the transpilePackages trick work for both local and production?