Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

func name with uppercase letter cause hot reload failure?

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

ZYSzyscommented, Jun 28, 2022

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.

1reaction

maiettacommented, Mar 16, 2022

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.

Top Results From Across the Web

Hot Reload not working properly with React-Redux and ...

This is my code where I want the loading of data (callback in useEffect() ) called only once: function Sidebar() { const dispatch...

5 Common Errors in Lightning Web Component

The event type name should follow these rules:- No uppercase letters; No spaces; Use underscores to separate words ...

Convert and redirect URL in uppercase to lowercase using ...

This redirects/corrects any URL containing uppercase letters to the same - all ... function on the URL-path ( REQUEST_URI server variable) the result...

Google Sheets Query function: Learn the most powerful ...

Learn how to use the super-powerful Google Sheets Query function to analyze your ... letters must be uppercase: A, B, C, etc. otherwise...

Legacy SQL Functions and Operators | BigQuery

The WITHIN keyword causes the aggregate function to aggregate across ... Use JOIN EACH when your query has failed with a resources exceeded...