Fast refresh doesn't work when importing function with capitalized name

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64 Binaries: Node: 16.14.0 npm: 8.3.1 Yarn: 1.22.18 pnpm: N/A Relevant packages: next: 12.1.1-canary.17 react: 17.0.2 react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 99.0.4844.83 (Official) (x86_64)

How are you deploying your application? (if relevant)

Not relevant

Describe the Bug

I think that the reproduction repository I have prepared fully describes the bug so please have a look ⬇️ .

• If we change the description prop in lowercasedEnhancePropsFunction function HMR will properly refresh the component with the updated data.

• But If we change the title prop in CapitalizedEnhancePropsFunction function then nothing will change in our component.

• Issue occurs only if we have a function with capitalized name, imported from another file and that’s the only one export existing in this file. If we export anything else from this file (i.e. export const hack = undefined) HMR will work properly.

Expected Behavior

HMR should refresh the component with the updated data every time, no matter the name of the function we are importing.

To Reproduce

I have created a reproduction repository:

https://github.com/usertive/next-js-issue

1. yarn dev
2. Change description in lowercasedEnhancePropsFunction function - works.
3. Change title in CapitalizedEnhancePropsFunction function - doesn’t work.

[timneutkens]

@anthonyespirat @tholder were you using React 18? If so 12.1.3 has solved the issue with Fast Refresh on React 18. Related PR: #35718

[anthonyespirat]

fix with this downgrade

    "react": "17.0.2",
    "react-dom": "17.0.2",