Why is importing an icon named ImportExport breaking other dependencies? - babeljs

Question

I added a Material-UI icon to one of my react components like so:
import { ImportExport } from '#material-ui/icons';
Thereafter, on my production site (but not my localhost dev server), I started getting an error on pageload whereby my socket-io client library was unable to correctly import something in one of its internal files. It had this:
const encodePacket = require("./encodePacket");
Which was used like so:
encodePacket(packet, false, encodedPacket => {
This is where the error arises: TypeError: encodePacket is not a function. Inspecting it, I can see that encodePacket is indeed not a function. When printed in the console, it shows as {default: {…}, __esModule: true}.
On my localhost dev server, this isn't the case. It's a function as expected. Moreover, the import right next to it, for decodePacket, is still a function in both contexts, locally and in production.
More bizarrely, when I examine the encodePacket module in the console, it looks like this:
Mui is Material-UI, a UI lib I use in other parts of the application and from which the icon is sourced - obviously it has no connection to a network library's internal packet encoding logic.
By commenting out the ImportExport icon and its import, I found that the error goes away.
What on earth though? How could this happen?
I even tried renaming the icon, but that didn't work either~
import { ImportExport as ReverseSortIcon } from '#material-ui/icons';
Any suggestions? I'm using Parcel and this is my tsconfig that has worked for 2+ years uneventfully~
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"jsx": "react",
"esModuleInterop": true
},
"include": [
"./src/**/*"
]
}