fast refresh not working when using some babel macro

[littlee]

Describe the bug

I'm using autobg.macro in my project, which works fine in react-scripts@3, but when using it with v4, the fast refresh feature does not work. I have to reload my page every time to get the update.

src/App.js

import styled from 'styled-components/macro';
import autobg from 'autobg.macro';

const Map = styled.div`
  ${autobg('./assets/map.jpg')}
`;

function App() {
  return <Map />;
}

export default App;

autobg.macro doc link: https://github.com/littlee/autobg.macro

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

did not find anything helpful

Environment

Environment Info:

  current version of create-react-app: 4.0.0
  running from /Users/lixiaokai/.npm/_npx/37617/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.183
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. edit src/App.js to

import styled from 'styled-components/macro';
import autobg from 'autobg.macro';

const Map = styled.div`
  ${autobg('./assets/map.jpg')}
`;

function App() {
  return <Map />;
}

export default App;

2. edit src/App.js, add some <h1 /> or anything

3. switch to the browser, wait for the update

Expected behavior

the browser should update the page without a full reload

Actual behavior

the browser does not update the page until a manually full reload

[atmortensen]

I've having similar issues with CRA v4.0.0 and Firebase. I'm actually not sure if Firebase has anything to do with it, but I'm having to manually refresh a lot and sometimes parts of a component will update and others won't.

[snettah]

Same when using graphql from babel-plugin-relay/macro

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.