The source separation by require/import breaks non-esm dependencies

Pixi’s package.json now separates output sources depending on whether import or require was used to import it. This causes issues in webpack with dependencies that were transpiled to umd, as umd will use require statements. If the primary project uses import, then the primary project will load the esm dist, and the dependency will load the cjs dist, causing two different pixi runtimes to be imported and breaking the dependency.

Expected Behavior

Only the /cjs/ or /esm/ sources should be imported into the project.

Current Behavior

Both /cjs/ and /esm/ sources will be imported into the project.

Steps to Reproduce

Create a barebones Webpack 5 project. import both pixi.js and pixi3d. /cjs/ and /esm/ modules are now both loaded into the project.

Environment

• pixi.js version 6.4.2

[lunarraid]

Also, @lunarraid have you tried setting a resolve path for “pixi.js” to be the CommonJS unbundle instead? Wondering what the guidance is for folks also bumping into this.

I did try aliasing it and that allowed my barebones repo to function, though that was only if modules use pixi.js. I’d imagine that if you’re importing dependencies, you would have to alias every single subpackage. I ran into some other issues with this method in my larger package but haven’t tracked them down yet. I’m not 100% certain alias is the best way to go as you need to manually alias any possible variation of the imports, but also haven’t yet found the proper way to force either esm or cjs for a dependency. Still digging.

[jnsmalm]

@lunarraid If Pixi3D would output ESM as well, would that help?