diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js index 9592a994399..a581007bdbe 100644 --- a/packages/react-refresh/src/ReactFreshBabelPlugin.js +++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js @@ -304,6 +304,12 @@ export default function (babel, opts = {}) { if (callee.object.type === 'Identifier') { bindingName = callee.object.name; } + if ( + callee.object.type === 'MemberExpression' && + callee.object.object.type === 'Identifier' + ) { + bindingName = callee.object.object.name; + } break; case 'Identifier': bindingName = callee.name; diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js index 1f397de0a24..8b1b8fce71e 100644 --- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js +++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js @@ -453,6 +453,19 @@ describe('ReactFreshBabelPlugin', () => { ).toMatchSnapshot(); }); + it('generates valid signature for nested ways to call Hooks', () => { + expect( + transform(` + import FancyHook from 'fancy'; + + export default function App() { + const foo = FancyHook.property.useNestedThing(); + return

{foo}

; + } + `), + ).toMatchSnapshot(); + }); + it('does not consider require-like methods to be HOCs', () => { // None of these were declared in this file. // It's bad to register them because that would trigger diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap index 4f097910033..89e56831ab1 100644 --- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap +++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap @@ -151,6 +151,22 @@ var _c; $RefreshReg$(_c, "App"); `; +exports[`ReactFreshBabelPlugin generates valid signature for nested ways to call Hooks 1`] = ` +var _s = $RefreshSig$(); +import FancyHook from 'fancy'; +export default function App() { + _s(); + const foo = FancyHook.property.useNestedThing(); + return

{foo}

; +} +_s(App, "useNestedThing{foo}", false, function () { + return [FancyHook.property.useNestedThing]; +}); +_c = App; +var _c; +$RefreshReg$(_c, "App"); +`; + exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = ` let connect = () => { function Comp() {