Remove __webpack_exports__ from error overlay

packages/react-dev-overlay/src/middleware.ts

@@ -216,7 +216,9 @@ export async function createOriginalStackFrame({
       sourcePosition.name ||
       // default is not a valid identifier in JS so webpack uses a custom variable when it's an unnamed default export
       // Resolve it back to `default` for the method name if the source position didn't have the method.
-      frame.methodName?.replace('__WEBPACK_DEFAULT_EXPORT__', 'default'),
+      frame.methodName
+        ?.replace('__WEBPACK_DEFAULT_EXPORT__', 'default')
+        ?.replace('__webpack_exports__.', ''),
     arguments: [],
   }
 

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -1062,4 +1062,27 @@ describe('ReactRefreshLogBox app', () => {
 
     await cleanup()
   })
+
+  test('Should not show __webpack_exports__ when exporting anonymous arrow function', async () => {
+    const { session, cleanup } = await sandbox(next)
+
+    await session.patch(
+      'index.js',
+      `
+       export default () => {
+        if (typeof window !== 'undefined') {
+          throw new Error('test')
+        }
+
+        return null
+       }
+
+      `
+    )
+
+    expect(await session.hasRedbox(true)).toBe(true)
+    expect(await session.getRedboxSource()).toMatchSnapshot()
+
+    await cleanup()
+  })
 })

test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ReactRefreshLogBox app Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
+"index.js (4:16) @ default
+
+  2 | export default () => {
+  3 |  if (typeof window !== 'undefined') {
+> 4 |    throw new Error('test')
+    |         ^
+  5 |  }
+  6 | 
+  7 |  return null"
+`;
+
 exports[`ReactRefreshLogBox app boundaries 1`] = `
 "FunctionDefault.js (1:50) @ FunctionDefault