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