Next.js Discord

Discord Forum

I was updating Next 13.1.1 to 14.0.4 and run into this error

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
The error I'm getting is :
node_modules/rc-util/es/omit.js:1 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)

57 Replies

Sun bearOP
have you checked they have any guide for next 14?
Sun bearOP
does updating antd will fix ??
Ray
not sure, i dont use antd
DirtyCajunRice | AppDir
that dependency list is insane
longer than a US congress bill
Ray
bootstrap mui antd :mind_blow_astonished:
Sun bearOP
yeah, it's pretty long
@Ray bootstrap mui antd <:mind_blow_astonished:767753691582693407>
DirtyCajunRice | AppDir
first thing i noticed. so many conflicting libraries
@Ray bootstrap mui antd <:mind_blow_astonished:767753691582693407>
Sun bearOP
what's wrong ??
DirtyCajunRice | AppDir
mr yaba i think you need to do some refactoring
and maybe pour yourself a glass or 5 of whiskey
Sun bearOP
@DirtyCajunRice | AppDir it's not my repo actually
Sun bearOP
any suggestion ??
what's wrong with this "bootstrap mui antd"??
DirtyCajunRice | AppDir
they are all meant to be “all encompassing”
you normally use ONE of them
not all 3
the list reads like someone just followed tutorials and installed whatever that tutorial needed for that component with no regard for interoperability
Sun bearOP
How do I remove no longer used package
any resource to do that ??
@Sun bear How do I remove no longer used package
DirtyCajunRice | AppDir
that is a manual task honestly. i wouldnt trust automated ways
Sun bearOP
BTW I fixed it just now....
by using this in next.config.ts
transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ],
luck for me
I have lot of work on optimization
DirtyCajunRice | AppDir
its a bandaid, but atleast gets you started
Sun bearOP
Can you please have some suggestion on optimazation bundle size, javascript size
coz LCP, CLS are bad at the moment
DirtyCajunRice | AppDir
id first worry about optimizing redundant packages
Sun bearOP
Performance is like 41 rn
DirtyCajunRice | AppDir
you need to get that list down a LOT
DirtyCajunRice | AppDir
well… pick antd, or mui, or bootstrap, or something completely different, and make all the components use that library.
dont use multiple frameworks that gunk up the space for the same thing
Sun bearOP
One bad that hitting performance is img tag, they used img tag instead of Image component from next/image, and it is okay to pass fill because there is no width and height on that ?????
Sun bearOP
Fun Fact: I only know tailwindcss and no experience on all of this CSS framework
@DirtyCajunRice | AppDir you dont want to fill if you can. you want static sizes so there is no CLS
Sun bearOP
So I have to know the image size ??
it on s3 bucket rn
then get rid of all that bullshit and use tailwind
😄 thats what i would have done haha
Sun bearOP
No way I can't
its big repo and it's urgent to optimize
Only I need to do at the moment is optimize performance
@Sun bear Only I need to do at the moment is optimize performance
DirtyCajunRice | AppDir
all of those frameworks are client css in js
Sun bearOP
Can you list any suggestion on optimization trick ??
DirtyCajunRice | AppDir
so… you will have problems optimizing no matter what
Sun bearOP
yeah, okay also it's page router 😩
any optimization trick you have used in nextjs page router ??
DirtyCajunRice | AppDir
nope. im not the guy for pages router. hence my name
Sun bearOP
also crashed again.............
Ray
but not sure will it work in your app