Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

[AlokTakshak]

Describe the bug

I am Working on a Mono Repo which has thousands line of code. Previously we were on Vite Version 4.4.9 and during that
the plugin was working as expected we were not any hmr invalidate but after upgrading to Vite 5. Now once i update file which exports all messages that is used by all other files now my terminal is bombarded with thousands of hmr invalidate messages.
Sample is attached. Could you help why started hapening now and how can we move to older behaviour. As fixing all files to decouple util function exports and React Components exports is not possible as code base more than 20,000+ files

Could not Fast Refresh ("getCascadingArchivalSelectionError" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports 3:11:59 PM [vite] hmr update /File1.tsx, /File2.tsx 3:11:59 PM [vite] hmr invalidate /File2.utils.tsx Could not Fast Refresh ("getReplicationTargetSelectionError" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

Reproduction

NA

Steps to reproduce

Starting Dev server using vite --host

react({ jsxImportSource: '@emotion/react', babel: { plugins: ['@emotion/babel-plugin'], }, }),

System Info

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M3 Pro
    Memory: 516.44 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 
    Yarn: 1.22.17 
    npm: 10.8.3 
    pnpm: 9.12.1 
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.3
  npmPackages:
    @vitejs/plugin-react: 4.3.4 => 4.3.4
    @vitejs/plugin-react-swc: 3.3.0 => 3.3.0
    rollup: 4.30.1 => 4.30.1
    vite: 5.4.13 => 5.4.13

Used Package Manager

pnpm

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.
• 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.

[ArnaudBarre]

This change was done in the version 3.1.0 of the plugin.
Without that, updates to utils in your tsx files says "hmr update" but in fact the update is not available for others files

You have two solutions that to keep an half broken HMR:

• Keep using the react-plugin v3.0.1 and ignore the vite peer deps range warning, it will work with Vite 2 to 6
• Use latest version (better for perf) and have a local patch to change the line if (!nextExports) return; to return;.

Otherwise you can opt-out of HMR and use https://github.com/owlsdepartment/vite-plugin-babel with the emotion plugin or https://github.com/unplugin/unplugin-swc with the equivalent rust plugin (should have faster builds), but you get full page reload on every change. But at least you don't end up with an state where you need to manually refresh when doing some changes to non component exports

For info, at some point Vite will have a bundled dev mode where the react plugin can have HMR working despite having files that exports both utils and components, but it would take more than a year I think to get to it.

[AlokTakshak]

@ArnaudBarre Thanks will try that

Use latest version (better for perf) and have a local patch to change the line if (!nextExports) return; to return;.
can this change also be applied on @vitejs/plugin-react-swc as we have also have another project using @vitejs/plugin-react-swc

[ArnaudBarre]

Yes the HMR logic/code is exactly the same!

[AlokTakshak]

@ArnaudBarre This does reduce the number of instances Could not Fast Refresh but while working with Vite 4.4.9 and latest version of @vitejs/plugin-react it refreshes whole page in cases where lots of invalidates were hapenning and but works normally when i was updating react components while after making above changes it doesn't even update UI when i am updating in a file which only exports React component. which i was not expecting. Do you think this could be due to change in Vite instead of Plugin?

[ArnaudBarre]

Sorry my bad, the patch skip the export checks, but also the fast refresh update. Instead of the suggested patch, delete this line below if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);

[AlokTakshak]

Above change was not working expected as it was not triggering page refresh. I tried to find the root cause
with @vitejs/plugin-react@4.3.4 and Vite@5.0.11 i don't see lots of hmr update but ui refreshes and gets updated which i was expecting after updating to Vite@5.1.0-beta.0 the above mentioned issue starts happening that is ui updates correctly but lots of hmr comments are added to both terminal console and dev console.

[ArnaudBarre]

I'm not sure I'm following. You are saying that with Vite 5 + latest version of the react plugin + a patch that remove if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage) you still have too many files updating with HMR?

[AlokTakshak]

Project Structure
we have a file known as generator.ts which read a file message.json and create a message.constants.ts. message.constants.ts exposes a MESSAGE Object which is imported by each file inside codebase and passed into id prop of FormattedMessage from react-intl

examples
//File1.tsx ...... <FormattedMessage id={MESSAGE.BUTTONS.SUBMIT}/>
//File12.tsx ...... <FormattedMessage id={MESSAGE.BUTTONS.CONTINUE}/>
similarly each file is import the MESSAGE from message.constants.ts.

Now when i update text for Continue button in message.json the generator is triggered again and message.constants.ts is updated. Now expectation is that UI should also be updated with this new text.

@vitejs/plugin-react@4.3.4 + Vite@5.0.11 + (without removing if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage) ) -> This works as expected i.e we don't see many console logs and UI is also updated correctly

@vitejs/plugin-react@4.3.4 + Vite@5.1.0-beta.0 + (without removing if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage) ) -> This updated the UI but we start seeing lots of hmr invalidated comments in both browser and terminal console

@vitejs/plugin-react@4.3.4 + Vite@5.1.0-beta.0 + (with removing if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage) ) -> This fixes the hmr invalidated comments but Ui is not updated with the updated text.