diff --git a/packages/react-dev-overlay/src/middleware.ts b/packages/react-dev-overlay/src/middleware.ts index 1fbd3508a0a51f9..cf2787b9eb8db76 100644 --- a/packages/react-dev-overlay/src/middleware.ts +++ b/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__', 'exports'), arguments: [], } @@ -322,6 +324,7 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) { '' ) + console.log('/__nextjs_original-stack-frame', moduleId, modulePath) let source: Source = null const clientCompilation = options.stats()?.compilation const serverCompilation = options.serverStats()?.compilation @@ -387,7 +390,7 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) { moduleId, modulePath, rootDirectory: options.rootDirectory, - errorMessage: frame.errorMessage, + errorMessage: 'HJÄÄÄLP', // frame.errorMessage, clientCompilation: isClientError ? clientCompilation : undefined, serverCompilation: isServerError ? serverCompilation : undefined, edgeCompilation: isEdgeServerError ? edgeCompilation : undefined, diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts index d78957b0d31a382..3a372d42d427698 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts +++ b/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() + }) }) diff --git a/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap index 031f532d4b6d6c2..34c22b0ebaea5f0 100644 --- a/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/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) @ exports.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