Clone a custom hook node before use (#16019)

packages/react-refresh/src/ReactFreshBabelPlugin.js

@@ -245,7 +245,7 @@ export default function(babel) {
       key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
       customHooks: fnHookCalls
         .filter(call => !isBuiltinHook(call.name))
-        .map(call => call.callee),
+        .map(call => t.cloneDeep(call.callee)),
     };
   }
 

packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js

@@ -15,7 +15,12 @@ function transform(input, options = {}) {
   return wrap(
     babel.transform(input, {
       babelrc: false,
-      plugins: ['syntax-jsx', 'syntax-dynamic-import', freshPlugin],
+      plugins: [
+        'syntax-jsx',
+        'syntax-dynamic-import',
+        freshPlugin,
+        ...(options.plugins || []),
+      ],
     }).code,
   );
 }
@@ -387,6 +392,26 @@ describe('ReactFreshBabelPlugin', () => {
     ).toMatchSnapshot();
   });
 
+  it('includes custom hooks into the signatures when commonjs target is used', () => {
+    // this test is passing with Babel 6
+    // but would fail for Babel 7 _without_ custom hook node being cloned for signature
+    expect(
+      transform(
+        `
+        import {useFancyState} from './hooks';
+        
+        export default function App() {
+          const bar = useFancyState();
+          return <h1>{bar}</h1>;
+        }
+    `,
+        {
+          plugins: ['transform-es2015-modules-commonjs'],
+        },
+      ),
+    ).toMatchSnapshot();
+  });
+
   it('generates valid signature for exotic ways to call Hooks', () => {
     expect(
       transform(`

packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap

@@ -218,6 +218,37 @@ var _c;
 $RefreshReg$(_c, "App");
 `;
 
+exports[`ReactFreshBabelPlugin includes custom hooks into the signatures when commonjs target is used 1`] = `
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _s = $RefreshSig$();
+
+exports.default = App;
+
+var _hooks = require('./hooks');
+
+function App() {
+  _s();
+
+  const bar = (0, _hooks.useFancyState)();
+  return <h1>{bar}</h1>;
+}
+
+_s(App, 'useFancyState{bar}', false, function () {
+  return [_hooks.useFancyState];
+});
+
+_c = App;
+
+var _c;
+
+$RefreshReg$(_c, 'App');
+`;
+
 exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
 
 function hello() {