Page MenuHomePhabricator

Make react-icomoon work with Webpack 5
ClosedPublic

Authored by ashoat on Feb 12 2023, 7:03 PM.
Tags
None
Referenced Files
F3481878: D6704.diff
Tue, Dec 17, 4:59 AM
Unknown Object (File)
Tue, Dec 3, 11:27 AM
Unknown Object (File)
Fri, Nov 29, 8:34 PM
Unknown Object (File)
Nov 15 2024, 1:32 PM
Unknown Object (File)
Nov 11 2024, 4:46 AM
Unknown Object (File)
Nov 11 2024, 4:42 AM
Unknown Object (File)
Nov 4 2024, 8:52 PM
Unknown Object (File)
Oct 29 2024, 6:25 PM
Subscribers
None

Details

Summary

react-icomoon has a quirky CommonJS export with a hack meant to make it work when imported from an ES Modules context. The idea was that would set exports.__esModule to enable the hack, and you would export a prop named default that would be the "default" import for the ESM.

This hack was supported in Webpack 4, but not in Webpack 5. There's a lot of noise about this on GitHub, but the Webpack team points to Node as no longer supported this hack either as justification for pulling it out.

The react-icomoon package uses this hack. I tried upgrading it, but the latest version still had the same problem. To get around it, I just update the code to access .default directly.

Note that this means lib/components/SWMansionIcon.react.js wouldn't work in a React Native context, despite react-icomoon claiming to support React Native. But we don't need it on React Native since we use createIconSetFromIcoMoon from @expo/vector-icons instead.

Depends on D6703

Test Plan
  1. I tested dev build in web via yarn dev in web + keyserver and then tested the website
  2. I tested prod build by running yarn prod in web and then tested the website by running keyserver with yarn prod-build && yarn-prod

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage