func name with uppercase letter cause hot reload failure?

[yukilzw]

Describe the bug

Use react template. When a function name that starts with an uppercase letter in a component, hot reload was fail, It only can refreshed browser unless the function is changed to lowercase:

// hot reload fail
const Func = () => null;
export default () => 123;

// hot reload success
const func = () => null;
export default () => 123;

Reproduction

issue-mini-project

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.0.0 
    npm: 7.10.0
  Browsers:
    Chrome: 98.0.4758.80
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.2.0 
    vite: ^2.7.2 => 2.8.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

I can't reproduce the behaviour you described. Please create a minimal reproduction, e.g. GitHub repo or stackblitz to help show the bug.

[github-actions]

Hello @yukilzw. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[yukilzw]

I can't reproduce the behaviour you described. Please create a minimal reproduction, e.g. GitHub repo or stackblitz to help show the bug.

https://github.com/yukilzw/issue-vite-project

Easy to reproduce, I used vite npm command to create a new repository and just split the original template code into Comp.jsx.Please have a look.

[GregBorrelly]

I was able to reproduce as well by cloning the repo above on Node v16. When updating the content in the Comp component, the following log appears on the terminal but the page does not update unless I refresh.

2:51:27 PM [vite] hmr update /src/Comp.jsx (x4)

However when I created a new vite project and created a component by the same name. HMR worked as expected.

[yukilzw]

I was able to reproduce as well by cloning the repo above on Node v16. When updating the content in the Comp component, the following log appears on the terminal but the page does not update unless I refresh.

2:51:27 PM [vite] hmr update /src/Comp.jsx (x4)

However when I created a new vite project and created a component by the same name. HMR worked as expected.

It is related to the reference path of the component. According to my test, If you put all the components and function in root file, there is no problem. So you can find what's the different from mine.I just changed reference path of the default vite project template.

[maietta]

Turns out, this seems to be the same problem when naming fileNames with a capital letter in the name but not the first letter. As a result, HMR function fails to work for those files. Took me nearly two days to figure this out.

[qbunia]

Got same problem as above

[ZYSzys]

I dig into this problem, and found it's the intentional behavior of react-refresh/babel, named your component then the fast refresh could be work.

https://github.com/facebook/react/blob/a4bed469697a1e23c398fe80228df31ef6d4b612/packages/react-refresh/src/ReactFreshBabelPlugin.js#L437

// Anonymous direct exports like export default function() {}
// are currently ignored.

https://github.com/facebook/react/blob/a4bed469697a1e23c398fe80228df31ef6d4b612/packages/react-refresh/src/ReactFreshBabelPlugin.js#L526

// We don't currently handle anonymous default exports.

[maietta]

@ZYSzys Holy moly, thank you for digging into this and identifying the root cause. I was fairly new to Vue + Vite when i ran into this problem and wasn't sure how to find the root cause. I had issues digging into it.

My solution was to begin lowercasing everything as much as I didn't want to.