Next.js Discord

Discord Forum

nextjs14 pages router + antd

Answered
gref9730 posted this in #help-forum
Open in Discord
Avatar
gref9730OP
Hello Im trying to use next js 14 with pages routing system and im getting errors when using antd library that random modules from antd library that im not even using in the project.. but they are in .next/.. folder
SyntaxError: Cannot use import statement outside a module

I found multiple discussions and most of them are closed but its still not working

https://github.com/vercel/next.js/pull/58992
Answered by gref9730
"transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]" this worked

@joulev Thanks a lot!!!! ❤️
View full answer

8 Replies

Avatar
joulev
try adding antd packages to transpilePackages (https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages)
Avatar
gref9730OP
got it like this 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@acme/ui', 'lodash-es', 'antd'],
};

export default nextConfig;


still getting same erros
Avatar
joulev
seems like the list needs to include quite a few more: https://github.com/vercel/next.js/issues/58817
Avatar
gref9730OP
and when I tried to change export default nextConfig; to "module.exports = nextConfig;"

im getting this error 

module.exports = nextConfig
^

ReferenceError: module is not defined in ES module scope
Avatar
joulev
that one depends on whether your file is next.config.js or next.config.mjs. if .js, use the module.exports syntax. if .mjs, use the export default syntax
Avatar
gref9730OP
aah okey
Avatar
gref9730OP
"transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]" this worked

@joulev Thanks a lot!!!! ❤️
Answer
Avatar
joulev
youre welcome. also thanks for confirming, now i have a list so for future people asking this question i can send them without having to look for the github issue, thanks for that