Frontend-build: investigate/solve issue between @svgr/webpack and webpack-dev-server

[dianekaplan]

Summary: the combination of two packages make an issue where some MFEs won't build after being updated to use frontend-build 9.1.2; 'npm run build' fails after necessary files aren't written into the dist folder, making a fatal error when pushing to New Relic because the bundle doesn't exist. ( "@svgr/webpack": "6.2.1", "webpack-dev-server": "4.7.3",)

Clues: (from Michael Terry and Adam Stankiewicz)

• both of these packages are present in the new frontend-build version 9.1.2, but also the issue can be reproduced on version 9.1.1 after manually updating the dev-server to have both of those package versions (removing either one removes the problem)
• we've seen the issue updating payment MFE and learning MFE to frontend-build 9.1.2, BUT frontend-app-publisher is on frontend-build 9.1.2 and does NOT break. When trying on frontend-app-portal, Adam S hit the issue during the github CI check
• commenting out bundle analyzer plugin from the prod webpack config removes the “no file found” messages in the stack trace, BUT it still fails with the same issues as in the screenshot above.
• one possible suspect is a timing issue: it's like webpack-bundle-analyzer is incorrectly trying to parse dist before the files are actually put there.

[arbrandes]

Question came up during the last FWG meeting: the Node 16 upgrade was NOT the cause, it seems (it was tagged before 9.1.2).

[inventhouse]

What is the current status of this? What can I do to help? (Note: I really don't know very much about npm nor webpack)

[arbrandes]

@inventhouse, the status is still as stated in the description. We're looking for somebody to try and discover what exactly causes the issue, and then hopefully submit a patch to fix it. If you do end up picking this up, you may find the discussion on the last FWG meeting about this useful. (It starts at the 24'25'' mark, roughly.)

[ghassanmas]

I was looking into this, but couldn't reprodue it as (a fatal error) on (learning, account, and publisher MFEs) what I got is (warnings related @edx/paragon or/and react-responsive) which I don't think that what this issue is concerned about, right?.
My env while testing was:

node -v: v12.21.0
npm -v: 6.14.11

Worth noting that webpack-dev-server support node >= 12.13, so may be check if that contraint is met on the env where it fails.

ref:

Warning
webpack-dev-server v4.0.0+ requires node >= v12.13.0, webpack >= v4.37.0 (but we recommend using webpack >= v5.0.0), and webpack-cli >= v4.7.0.

[adamstankiewicz]

Also, it turns out the reproduction I thought I had seen in frontend-app-admin-portal when using [email protected] was not related to frontend-build after all, but an issue within the consuming MFE.

So, frontend-app-admin-portal is also safely running [email protected] in production as of this writing.

[inventhouse]

This is still blocking frontend-app-payment.

[arbrandes]

This is still blocking frontend-app-payment.

@inventhouse, did openedx-unsupported/frontend-app-payment#579 fix the build?

[inventhouse]

With much help from @davidjoy we've found that frontend-app-payment's NewRelic setup was archaic, we're modernizing that and continuing to investigate.

[inventhouse]

Update: In addition to the above NewRelic updates, @davidjoy found that there were issues with frontend-component-header-edx; these two PRs finally got f-a-payment building again:

• fix: updating various dependencies and removing babel-polyfill by davidjoy · Pull Request #228 · edx/frontend-component-header-edx
• fix: bumping frontend-app-payment header to ^5.3.1 by davidjoy · Pull Request #6381 · edx/edx-internal

[mikix]

Yes, looks like the header dependency updates also fixed the issue for frontend-app-learning? Presumably that's why we only saw the issue in gocd, not in github CI.

Yay! I'd say this issue could be closed then.

[davidjoy]

For posterity - the actual error didn't even manifest in GoCD because the webpack build output isn't echoed to the console. It returns a 1 error code but we see none of the error output. Following that, in the log, there was a red herring/symptom of the failed build, in that our new relic plugins failed to upload the build artifacts... because they didn't exist on the filesystem.

I only noticed the problem when I tried to build frontend-app-payment locally with the frontend-component-header-edx installed. It exploded on some code related to frontend-enterprise's usage in the header. Some help from @adamstankiewicz solidified my understanding that upgrading frontend-enterprise in the edx header would probably fix it.

[adamstankiewicz]

Awesome, glad to hear this issue seems resolved! Closing the issue.