diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js index c03ee8da94520..c21e4aa710512 100644 --- a/packages/react-refresh/src/ReactFreshBabelPlugin.js +++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js @@ -306,7 +306,15 @@ export default function(babel) { } if (customHooksInScope.length > 0) { args.push( - t.arrowFunctionExpression([], t.arrayExpression(customHooksInScope)), + // TODO: We could use an arrow here to be more compact. + // However, don't do it until AMA can run them natively. + t.functionExpression( + null, + [], + t.blockStatement([ + t.returnStatement(t.arrayExpression(customHooksInScope)), + ]), + ), ); } return args; 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 113f8b9739bdd..d3e5aa5a760d6 100644 --- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap +++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap @@ -113,7 +113,9 @@ export default function App() { return

{bar}{baz}

; } -_s2(App, 'useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}', true, () => [FancyHook.useThing]); +_s2(App, 'useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}', true, function () { + return [FancyHook.useThing]; +}); _c = App; @@ -186,7 +188,9 @@ function useFancyState() { return foo; } -_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, () => [useFancyEffect]); +_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, function () { + return [useFancyEffect]; +}); const useFancyEffect = () => { _s2(); @@ -203,7 +207,9 @@ export default function App() { return

{bar}

; } -_s3(App, "useFancyState{bar}", false, () => [useFancyState]); +_s3(App, "useFancyState{bar}", false, function () { + return [useFancyState]; +}); _c = App;