HMR is broken in `DEV_SSR` mode

[arfizato]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I enabled DEV_SSR after @KyleAMathews told me to in order to fix a CSS inconsistency between the localhost version and netlify I've been having which actually fixed it but it stopped the auto-refresh on file save. I'd be happy to provide more information if needed.

Reproduction Link

https://github.com/arfizato/DEV_SSR-Bug-Reproduction

Steps to Reproduce

1. Enable DEV_SSR in your gatsby-config.js file
2. run gatsby develop
3. make changes, and wait for it to not auto-refresh

Expected Result

auto-refresh on file save

Actual Result

no auto-refresh whatsoever

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
  Binaries:
    Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.6
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.27)
  npmPackages:
    gatsby: ^4.21.1 => 4.21.1
    gatsby-plugin-google-analytics: ^4.21.0 => 4.21.0
    gatsby-plugin-mdx: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^5.22.0 => 5.22.0
    gatsby-plugin-sass: ^5.21.0 => 5.21.0
    gatsby-plugin-styled-components: ^5.22.0 => 5.22.0
    gatsby-source-filesystem: ^4.21.1 => 4.21.1
  npmGlobalPackages:
    gatsby-cli: 4.11.2

Config Flags

DEV_SSR: true

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[arfizato]

Hello, @LekoArts. Sorry that the link I provided was not helpful. I created a new repository and tested it still has the same problem. I went ahead and edited the reproduction link in the original comment but here it is again (click me) I'd be happy to provide more details if needed.

[marvinjude]

Hi @arfizato,

Thanks for reporting this. It looks like a regression from 4.19. We'd look into it

[sandren]

Setting a custom .babelrc can reproduce the issue.

# npm
npm install jotai
npm install --save-dev babel-preset-gatsby

# .babelrc
{
  "presets": ["babel-preset-gatsby"],
  "plugins": ["jotai/babel/plugin-react-refresh"]
}