1.13.1 TypeError: Cannot read property 'toJson' of undefined when bundling/serving large project

[c-eiser13]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
  Chrome: Version 97.0.4692.99
  Edge: Version 97.0.1072.76

• SPFx version
  1.13.1

• Node.js version
  14.15.5 and 14.19.0 (tested on both)

• etc

Describe the bug / error

I've upgraded 2 smaller projects to 1.13.1 with no trouble, so I began work on my large project yesterday evening. The upgrade was from 1.12.1 to 1.13.1 and I used the M365 CLI. After upgrading the project and upgrading dependencies , I was able to cleanup the package.json and eventually deleted package-lock.json and node_modules and re-ran npm i to make sure everything was clean (I've actually done this several times since). When I run gulp serve or gulp bundle (or npm run serve, since I am also using spfx-fast-serve), I get the error below:

Once I received this error, I began comparing this larger project to the smaller one I had upgraded just the day before and only difference were some gulpfile.js changes. To take that out of the equation, I created a fresh 1.13.1 project using yeomam, added spfx-fast-serve and then replaced my gulpfile with this new gulpfile. Since I received same error when serving, my next troubleshooting step was to see if it were possibly related to one of my web parts (this project has 40+ web parts).

I made a copy of my config.json and then basically added 4 web parts at a time to the original config.json and serve/bundle began working. Once I got to about 15 web parts in config.json, this is when the error began happening again. At this point I did some adding/removing of different sized web parts to see if it were a size issue or strictly a numbers issue, and from what I can tell it is size related and not quantity since I had successful serves with 16 web parts and failures with only 13.

Next, I opened WebpackTask.js coming from gulp-core-build-webpack and can see based on the error above that the issue is coming from here:

I added a log step to log the value of stats and depending on how many web parts are in my config.json, I either get a result or it is undefined. If I comment that entire section out in WebpackTask.js, my entire project (with full config.json) will bundle and serve properly:

This appears to be a bug that only impacts larger projects. Trying to figure out why "stats" may be undefined when there is a certain number/size of web parts? Is there a way in the gulpfile to bypass the stats section? If more information is needed, please let me know.

Steps to reproduce

1. In a large project, > 15 or so web parts/extensions, upgrade to 1.13.1
2. Run gulp serve or gulp bundle

Expected behavior

serve and bundle commands complete without error.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@c-eiser13 - we will include the fix in the next release.

[c-eiser13]

Thanks @AJIXuMuK , when you say next release, are you referring to 1.14 of SPFx, or the next release of rushstack?

[AJIXuMuK]

Sorry for not explaining right away @c-eiser13 - I'm referring to SPFx 1.14.0

[westleyMS]

I am seeing this in a solution with 5 webparts

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues