RefreshSig is undefined

[stephencweiss]

👋 Hi! I'm using Parcel to bundle a TSDX library.

I am trying to add a custom hook:

.
 └── src
    └── hooks
        ├── customHook.tsx
        └── index.ts

My hooks index is:

export * from './customHook';

(and so on)

My custom hook is:

const { useDispatch } = require('react-redux');

export function useMixpanel() {
  const dispatch = useDispatch();
  console.log(`hit the hook`);
  const methods = {
    track: (eventName: string, properties: object) =>
      dispatch({
        type: 'Mixpanel Track',
        payload: { mixpanel: { eventName, properties } },
      }),
  };
  return methods;
}

This hook works if I don't use dispatch.

If I leave it as is, when I actually try to use it in a functional component, I get the error:

index.8d3dd0da.js:32467 Uncaught ReferenceError: $RefreshSig$ is not defined
    at Object.4f4Im.react-redux (index.8d3dd0da.js:32467)
    at newRequire (index.8d3dd0da.js:71)
    at localRequire (index.8d3dd0da.js:83)
    at Object.6ssI8../useMixpanel (index.8d3dd0da.js:32458)
    at newRequire (index.8d3dd0da.js:71)
    at localRequire (index.8d3dd0da.js:83)
    at Object.MElwL../common (index.8d3dd0da.js:30584)
    at newRequire (index.8d3dd0da.js:71)
    at localRequire (index.8d3dd0da.js:83)
    at Object.2XFFW../_actions (index.8d3dd0da.js:30533)

Looking at the actual source code, I'm seeing the following

Notice that the error seems to come up right around where the hook is actually being defined.

I've tried adding

if (process.env.NODE_ENV != 'production') {
  global.$RefreshReg$ = () => {};
  global.$RefreshSig$ = () => () => {};
}

to my App.tsx, but that doesn't seem to be sufficient.

All of the conversations I've found about this seem to be about webpack, e.g., pmmmwh/react-refresh-webpack-plugin#92, though it appears that Parcel's using the react-refresh packages in its default config for @2.0.0-beta-2 at a minimum:

Any ideas? Thanks in advance!

[stephencweiss]

Doing a bit more investigation, it appears that it's the HMR functionality. When run with --no-hmr the application works as expected.

What I'm really trying to figure out is: is there something special about this hook that's breaking HMR? Or is it simply bad luck that this is what broke it and trying to understand why the hook might have broken the build is a wild goose chase?