Hot reload not working (Always performing a full reload)

[0xabdou]

What version of Next.js are you using?

^10.0.7-canary.0

What version of Node.js are you using?

v14.15.4

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

Hot reload is not working. Every time I change something in a component, a full reload is preformed. The only time it works is when I change a css file.

Expected Behavior

Hot reload should be working when I change some component.

To Reproduce

I tried to scrap this minimal project:
https://github.com/aouahib/nextjs_hot_reload
git clone, npm install, npm run dev, change the text inside src/pages/index.tsx, save, and the page will be full reloaded.

[jamesmosier]

Remove @babel/plugin-transform-modules-commonjs from your babel.config.json. That plugin is interfering with Next's internal webpack/babel config.

[0xabdou]

@jamesmosier Thanks for the quick reply.
My app won't run without that plugin. I get weird errors like Attempted import error: 'IAuthApi' is not exported from './services/auth-api'..
I'd appreciate it if you can point me to some other workaround.

[jamesmosier]

There's no other workaround that I'm aware of unfortunately.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.