Skip to content

Commit ebdc078

Browse files
ztannerztanner
committed
[DevOverlay]: enable by default
1 parent 895b418 commit ebdc078

File tree

33 files changed

+530
-468
lines changed

33 files changed

+530
-468
lines changed

‎.github/workflows/build_and_test.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -581,7 +581,7 @@ jobs:
581581
uses: ./.github/workflows/build_reusable.yml
582582
with:
583583
nodeVersion: 18.18.2
584-
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
584+
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
585585
stepName: 'test-ppr-integration'
586586
secrets: inherit
587587

@@ -596,7 +596,7 @@ jobs:
596596
group: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
597597
uses: ./.github/workflows/build_reusable.yml
598598
with:
599-
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
599+
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
600600
stepName: 'test-ppr-dev-${{ matrix.group }}'
601601
secrets: inherit
602602

@@ -611,7 +611,7 @@ jobs:
611611
group: [1/7, 2/7, 3/7, 4/7, 5/7, 6/7, 7/7]
612612
uses: ./.github/workflows/build_reusable.yml
613613
with:
614-
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
614+
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
615615
stepName: 'test-ppr-prod-${{ matrix.group }}'
616616
secrets: inherit
617617

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ function DevToolsPopover({
252252

253253
<div className="footer">
254254
<MenuItem
255+
data-hide-dev-tools
255256
label="Hide Dev Tools"
256257
value={<HideShortcut />}
257258
onClick={hide}

‎packages/next/src/server/config-shared.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1253,7 +1253,7 @@ export const defaultConfig: NextConfig = {
12531253
staticGenerationMinPagesPerWorker: 25,
12541254
dynamicIO: false,
12551255
inlineCss: false,
1256-
newDevOverlay: false,
1256+
newDevOverlay: true,
12571257
streamingMetadata: false,
12581258
htmlLimitedBots: undefined,
12591259
useCache: undefined,

‎packages/next/src/server/config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -923,8 +923,8 @@ function assignDefaults(
923923
// TODO(jiwon): remove once we've made new UI default
924924
// Enable reactOwnerStack when newDevOverlay is enabled to have
925925
// better call stack output in the new UI.
926-
if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true') {
927-
result.experimental.newDevOverlay = true
926+
if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'false') {
927+
result.experimental.newDevOverlay = false
928928
}
929929
if (result.experimental.newDevOverlay) {
930930
result.experimental.reactOwnerStack = true

‎run-tests.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,25 @@ const ENDGROUP = process.env.CI ? '##[endgroup]' : ''
5050

5151
const externalTestsFilter = getTestFilter()
5252

53+
// TODO(new-dev-overlay): Remove this once old dev overlay fork is removed
54+
if (!process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY) {
55+
console.log('Setting __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY to true')
56+
process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY = 'true'
57+
} else {
58+
console.log(
59+
'__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY is already set to',
60+
process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY
61+
)
62+
}
63+
5364
const timings = []
5465
const DEFAULT_NUM_RETRIES = 2
5566
const DEFAULT_CONCURRENCY = 2
5667
const RESULTS_EXT = `.results.json`
5768
const isTestJob = !!process.env.NEXT_TEST_JOB
5869
// Check env to see if test should continue even if some of test fails
59-
const shouldContinueTestsOnError = !!process.env.NEXT_TEST_CONTINUE_ON_ERROR
70+
// const shouldContinueTestsOnError = !!process.env.NEXT_TEST_CONTINUE_ON_ERROR
71+
const shouldContinueTestsOnError = true
6072
// Check env to load a list of test paths to skip retry. This is to be used in conjunction with NEXT_TEST_CONTINUE_ON_ERROR,
6173
// When try to run all of the tests regardless of pass / fail and want to skip retrying `known` failed tests.
6274
// manifest should be a json file with an array of test paths.

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

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -50,27 +50,27 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
5050
await session.assertHasRedbox()
5151
if (process.env.TURBOPACK) {
5252
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
53-
"./node_modules/my-package/index.js:1:13
54-
Module not found: Can't resolve 'dns'
55-
> 1 | const dns = require('dns')
56-
| ^^^^^^^^^^^^^^
57-
2 | module.exports = dns
53+
"./node_modules/my-package/index.js (1:13)
54+
Module not found: Can't resolve 'dns'
55+
> 1 | const dns = require('dns')
56+
| ^^^^^^^^^^^^^^
57+
2 | module.exports = dns
5858
59-
https://nextjs.org/docs/messages/module-not-found"
59+
https://nextjs.org/docs/messages/module-not-found"
6060
`)
6161
} else {
6262
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
63-
"./node_modules/my-package/index.js:1:1
64-
Module not found: Can't resolve 'dns'
65-
> 1 | const dns = require('dns')
66-
| ^
67-
2 | module.exports = dns
63+
"./node_modules/my-package/index.js (1:1)
64+
Module not found: Can't resolve 'dns'
65+
> 1 | const dns = require('dns')
66+
| ^
67+
2 | module.exports = dns
6868
69-
https://nextjs.org/docs/messages/module-not-found
69+
https://nextjs.org/docs/messages/module-not-found
7070
71-
Import trace for requested module:
72-
./index.js
73-
./app/page.js"
71+
Import trace for requested module:
72+
./index.js
73+
./app/page.js"
7474
`)
7575
}
7676
})
@@ -98,30 +98,30 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
9898
const source = await session.getRedboxSource()
9999
if (process.env.TURBOPACK) {
100100
expect(source).toMatchInlineSnapshot(`
101-
"./index.js:1:1
102-
Module not found: Can't resolve 'b'
103-
> 1 | import Comp from 'b'
104-
| ^^^^^^^^^^^^^^^^^^^^
105-
2 | export default function Oops() {
106-
3 | return (
107-
4 | <div>
108-
109-
https://nextjs.org/docs/messages/module-not-found"
101+
"./index.js (1:1)
102+
Module not found: Can't resolve 'b'
103+
> 1 | import Comp from 'b'
104+
| ^^^^^^^^^^^^^^^^^^^^
105+
2 | export default function Oops() {
106+
3 | return (
107+
4 | <div>
108+
109+
https://nextjs.org/docs/messages/module-not-found"
110110
`)
111111
} else {
112112
expect(source).toMatchInlineSnapshot(`
113-
"./index.js:1:1
114-
Module not found: Can't resolve 'b'
115-
> 1 | import Comp from 'b'
116-
| ^
117-
2 | export default function Oops() {
118-
3 | return (
119-
4 | <div>
120-
121-
https://nextjs.org/docs/messages/module-not-found
122-
123-
Import trace for requested module:
124-
./app/page.js"
113+
"./index.js (1:1)
114+
Module not found: Can't resolve 'b'
115+
> 1 | import Comp from 'b'
116+
| ^
117+
2 | export default function Oops() {
118+
3 | return (
119+
4 | <div>
120+
121+
https://nextjs.org/docs/messages/module-not-found
122+
123+
Import trace for requested module:
124+
./app/page.js"
125125
`)
126126
}
127127
})
@@ -150,29 +150,29 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
150150
const source = await session.getRedboxSource()
151151
if (process.env.TURBOPACK) {
152152
expect(source).toMatchInlineSnapshot(`
153-
"./app/page.js:2:1
154-
Module not found: Can't resolve 'b'
155-
1 | 'use client'
156-
> 2 | import Comp from 'b'
157-
| ^^^^^^^^^^^^^^^^^^^^
158-
3 | export default function Oops() {
159-
4 | return (
160-
5 | <div>
161-
162-
https://nextjs.org/docs/messages/module-not-found"
153+
"./app/page.js (2:1)
154+
Module not found: Can't resolve 'b'
155+
1 | 'use client'
156+
> 2 | import Comp from 'b'
157+
| ^^^^^^^^^^^^^^^^^^^^
158+
3 | export default function Oops() {
159+
4 | return (
160+
5 | <div>
161+
162+
https://nextjs.org/docs/messages/module-not-found"
163163
`)
164164
} else {
165165
expect(source).toMatchInlineSnapshot(`
166-
"./app/page.js:2:1
167-
Module not found: Can't resolve 'b'
168-
1 | 'use client'
169-
> 2 | import Comp from 'b'
170-
| ^
171-
3 | export default function Oops() {
172-
4 | return (
173-
5 | <div>
174-
175-
https://nextjs.org/docs/messages/module-not-found"
166+
"./app/page.js (2:1)
167+
Module not found: Can't resolve 'b'
168+
1 | 'use client'
169+
> 2 | import Comp from 'b'
170+
| ^
171+
3 | export default function Oops() {
172+
4 | return (
173+
5 | <div>
174+
175+
https://nextjs.org/docs/messages/module-not-found"
176176
`)
177177
}
178178
})
@@ -199,29 +199,29 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
199199
const source = await session.getRedboxSource()
200200
if (process.env.TURBOPACK) {
201201
expect(source).toMatchInlineSnapshot(`
202-
"./app/page.js:2:1
203-
Module not found: Can't resolve './non-existent.css'
204-
1 | 'use client'
205-
> 2 | import './non-existent.css'
206-
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
207-
3 | export default function Page(props) {
208-
4 | return <p>index page</p>
209-
5 | }
210-
211-
https://nextjs.org/docs/messages/module-not-found"
202+
"./app/page.js (2:1)
203+
Module not found: Can't resolve './non-existent.css'
204+
1 | 'use client'
205+
> 2 | import './non-existent.css'
206+
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
207+
3 | export default function Page(props) {
208+
4 | return <p>index page</p>
209+
5 | }
210+
211+
https://nextjs.org/docs/messages/module-not-found"
212212
`)
213213
} else {
214214
expect(source).toMatchInlineSnapshot(`
215-
"./app/page.js:2:1
216-
Module not found: Can't resolve './non-existent.css'
217-
1 | 'use client'
218-
> 2 | import './non-existent.css'
219-
| ^
220-
3 | export default function Page(props) {
221-
4 | return <p>index page</p>
222-
5 | }
223-
224-
https://nextjs.org/docs/messages/module-not-found"
215+
"./app/page.js (2:1)
216+
Module not found: Can't resolve './non-existent.css'
217+
1 | 'use client'
218+
> 2 | import './non-existent.css'
219+
| ^
220+
3 | export default function Page(props) {
221+
4 | return <p>index page</p>
222+
5 | }
223+
224+
https://nextjs.org/docs/messages/module-not-found"
225225
`)
226226
}
227227
await session.patch(

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

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
import { createSandbox } from 'development-sandbox'
33
import { FileRef, nextTestSetup } from 'e2e-utils'
44
import {
5-
check,
65
describeVariants as describe,
76
getStackFramesContent,
87
retry,
98
getRedboxCallStack,
9+
getToastErrorCount,
1010
} from 'next-test-utils'
1111
import path from 'path'
1212
import { outdent } from 'outdent'
@@ -220,7 +220,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
220220
const source = next.normalizeTestDirContent(await session.getRedboxSource())
221221
if (isTurbopack) {
222222
expect(source).toEqual(outdent`
223-
./index.js:7:1
223+
./index.js (7:1)
224224
Parsing ecmascript source code failed
225225
5 | div
226226
6 | )
@@ -351,7 +351,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
351351
await session.assertHasRedbox()
352352
const source = await session.getRedboxSource()
353353
expect(source).toMatch(
354-
isTurbopack ? './index.module.css:1:9' : './index.module.css:1:1'
354+
isTurbopack ? './index.module.css (1:9)' : './index.module.css (1:1)'
355355
)
356356
if (!isTurbopack) {
357357
expect(source).toMatch('Syntax error: ')
@@ -735,23 +735,15 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
735735
await session.patch('index.js', file)
736736

737737
// Unhandled error and rejection in setTimeout
738-
expect(
739-
await browser.waitForElementByCss('.nextjs-toast-errors').text()
740-
).toBe('2 issues')
738+
expect(await getToastErrorCount(browser)).toBe(2)
741739

742740
// Unhandled error in event handler
743741
await browser.elementById('unhandled-error').click()
744-
await check(
745-
() => browser.elementByCss('.nextjs-toast-errors').text(),
746-
/3 issues/
747-
)
742+
expect(await getToastErrorCount(browser)).toBe(3)
748743

749744
// Unhandled rejection in event handler
750745
await browser.elementById('unhandled-rejection').click()
751-
await check(
752-
() => browser.elementByCss('.nextjs-toast-errors').text(),
753-
/4 issues/
754-
)
746+
expect(await getToastErrorCount(browser)).toBe(4)
755747
await session.assertNoRedbox()
756748

757749
// Add Component error
@@ -1059,7 +1051,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
10591051
await session.assertHasRedbox()
10601052
if (isTurbopack) {
10611053
expect(await session.getRedboxSource()).toEqual(outdent`
1062-
./app/styles2.css:1:2
1054+
./app/styles2.css (1:2)
10631055
Module not found: Can't resolve './boom.css'
10641056
> 1 | @import "./boom.css"
10651057
| ^
@@ -1245,16 +1237,16 @@ export default function Home() {
12451237
} else {
12461238
// FIXME: Webpack stack frames are not source mapped
12471239
expect(stackFrames).toMatchInlineSnapshot(`
1248-
"at eval (app/utils.ts (1:7))
1249-
at ./app/utils.ts ()
1250-
at options.factory ()
1251-
at __webpack_require__ ()
1252-
at fn ()
1253-
at eval ()
1254-
at ./app/page.js ()
1255-
at options.factory ()
1256-
at __webpack_require__ ()
1257-
at fn ()"
1240+
"at eval (app/utils.ts (1:7))
1241+
at ./app/utils.ts (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/app/page.js (39:1))
1242+
at options.factory (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (700:31))
1243+
at __webpack_require__ (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (37:33))
1244+
at fn (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (357:21))
1245+
at eval (./app/page.js)
1246+
at ./app/page.js (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/app/page.js (28:1))
1247+
at options.factory (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (700:31))
1248+
at __webpack_require__ (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (37:33))
1249+
at fn (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (357:21))"
12581250
`)
12591251
}
12601252
})

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ReactRefreshLogBox app default Import trace when module not found in layout 1`] = `
4-
"./app/module.js:1:1
4+
"./app/module.js (1:1)
55
Module not found: Can't resolve 'non-existing-module'
66
> 1 | import "non-existing-module"
77
| ^
@@ -110,7 +110,7 @@ exports[`ReactRefreshLogBox app default should strip whitespace correctly with n
110110
`;
111111
112112
exports[`ReactRefreshLogBox app turbo Import trace when module not found in layout 1`] = `
113-
"./app/module.js:1:1
113+
"./app/module.js (1:1)
114114
Module not found: Can't resolve 'non-existing-module'
115115
> 1 | import "non-existing-module"
116116
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -119,7 +119,8 @@ https://nextjs.org/docs/messages/module-not-found"
119119
`;
120120
121121
exports[`ReactRefreshLogBox app turbo Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
122-
"index.js (3:11) @ {default export}
122+
"index.js (3:11) @
123+
{default export}
123124
124125
1 | export default () => {
125126
2 | if (typeof window !== 'undefined') {

0 commit comments

Comments
 (0)