nextjs14 pages router + antd
Answered
gref9730 posted this in #help-forum
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
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!!!! ❤️
@joulev Thanks a lot!!!! ❤️
8 Replies
@gref9730 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
try adding antd packages to
transpilePackages (https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages)gref9730OP
got it like this
still getting same erros
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
transpilePackages: ['@acme/ui', 'lodash-es', 'antd'],
};
export default nextConfig;still getting same erros
@gref9730 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
seems like the list needs to include quite a few more: https://github.com/vercel/next.js/issues/58817
gref9730OP
and when I tried to change export default nextConfig; to "module.exports = nextConfig;"
im getting this error
im getting this error
module.exports = nextConfig
^
ReferenceError: module is not defined in ES module scope@gref9730 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
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
gref9730OP
aah okey
gref9730OP
"transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]" this worked
@joulev Thanks a lot!!!! ❤️
@joulev Thanks a lot!!!! ❤️
Answer
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