Page MenuHomePhabricator

Make react-icomoon work with Webpack 5
ClosedPublic

Authored by ashoat on Feb 12 2023, 7:03 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, May 13, 2:56 AM
Unknown Object (File)
Mon, May 13, 2:56 AM
Unknown Object (File)
Mon, May 13, 2:56 AM
Unknown Object (File)
Mon, May 13, 2:51 AM
Unknown Object (File)
Mar 29 2024, 4:37 AM
Unknown Object (File)
Mar 28 2024, 9:53 PM
Unknown Object (File)
Mar 28 2024, 4:37 AM
Unknown Object (File)
Mar 28 2024, 4:37 AM
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
Lint Not Applicable
Unit
Tests Not Applicable