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.

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

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