fix: next trace error

[ZachJW34]

• Closes Next.js ^11.1.1 : webpack error + bundling step timeout #17992

User facing changelog

Fix webpack error with next >= 11.1.1

Additional details

Next introduced tracing in v11.1.1. The trace is a required option for getNextJsBaseWebpackConfig, so this PR adds that. If trace doesn't exist, it's a no-op.

How to test

I tested this by creating a branch inside cypress-component-testing-examples (the deps are slightly out of date so I updated most of them, plus create-next-app doesn't use Webpack 4 so I forced it). You can run:

// On this branch
yarn workspace @cypress/react build-prod

git clone https://github.com/cypress-io/cypress-component-testing-examples.git
git checkout next-trace-error
cd ./create-next-app-webpack-5 && yarn
npx cypress open-ct # Will error with traceChild
# Copy and paste dist and plugins folder from newly built @cypress/react into local node_modules (yarn add -D @cypress/react@file:path-to-react package was hanging so I don't have a better way to test this)
npx cypress open-ct # Will pass!

You can repeat the above inside of create-next-app which will test Webpack 4. Also, you can change the Next version to 11.1.0 and verify that this change isn't breaking previous versions.

How has the user experience changed?

Next with Webpack 5 and Next >= 11.1.1 works

PR Tasks

NA

[cypress]

---

Test summary

12562 • 2 • 153 • 5 • 5

---

Run details

Project	cypress
Status	Failed
Commit	36ac05d
Started	Sep 21, 2021 9:50 PM
Ended	Sep 21, 2021 10:00 PM
Duration	10:40 💡
OS	Linux Debian - 10.9
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Failures

	e2e/focus_blur_spec.js		1
1	intercept blur methods correctly > focus area
	commands/actions/type_spec.js		1
1	... > element

---

Flakiness

	cypress/proxy-logging-spec.ts		2
1	Proxy Logging > request logging > fetch log shows resource type, url, method, and status code and has expected snapshots and consoleProps
2	Proxy Logging > request logging > fetch log shows resource type, url, method, and status code and has expected snapshots and consoleProps
	commands/net_stubbing_spec.ts		2
1	network stubbing > intercepting request > can intercept utf-8 request bodies without crashing
2	network stubbing > waiting and aliasing > can timeout waiting on a single request using "alias.request"
	commands/xhr_spec.js		1
1	src/cy/commands/xhr > abort > aborts xhrs currently in flight

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[elevatebart]

For some reason I still have the following traceChild error

[webpack-dev-middleware] TypeError: Cannot read property 'traceChild' of undefined
    at /Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/build/webpack/plugins/profiling-plugin.js:31:45
    at Hook.eval [as callAsync] (eval at create (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), <anonymous>:9:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:33634:14)
    at Compiler.compile (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:48339:28)
    at /Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75800:19
    at Hook.eval [as callAsync] (eval at create (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:33634:14)
    at run (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75754:33)
    at /Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75749:6
    at Compiler.readRecords (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:48176:11)
    at run (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75745:26)
    at Watching._go (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75804:3)
    at Watching._invalidate (/Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75981:9)
    at /Users/bart/Documents/exp/next-wp-5-cy/node_modules/next/dist/compiled/webpack/bundle5.js:75667:28
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

Here is the repo I use https://github.com/elevatebart/next-wp-5-cy

[ZachJW34]

@elevatebart I checked out your repo and didn't see the traceChild error after copying the new next/plugins code. Can you provide some steps on how you tested the local code in your repo?

[elevatebart]

@ZachJW34 I swear I saw it fail.

It worked, sorry fo the weirdness I guessed I missed a file to copy.

[lmiller1990]

I tried following the instructions here and in the original issue but I can't reproduce the problem. Looks like @elevatebart did though. Are we good to merge?

Edit: I reproduced by changing some versions of dependencies, but I cannot get past the trace error. Maybe I'm doing something wrong.

If we are confident this is fix is fine, happy to move forward.

[elevatebart]

This fixed worked for me, it is not introducing regressions
@ZachJW34 let's merge!

LGTM