Blocking bug with @pixi/node, unable to use with non-CommonJS modules

I’ve been experimenting with the @pixi/node package available in v6.5.0-rc.2. I have no problems when it’s using CommonJS (e.g., require('@pixi/node')), but I am having issues using modules (e.g., import * as PIXI from '@pixi/node').

Here’s a simple example:

https://github.com/bigtimebuddy/pixi-node-example/blob/module/index.mjs

Running this produces the following error:

import { Extract } from '@pixi/extract';
         ^^^^^^^
SyntaxError: Named export 'Extract' not found. The requested module '@pixi/extract' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@pixi/extract';
const { Extract } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)
    at async handleMainPromise (internal/modules/run_main.js:59:12)

Having all packages be both CommonJS and ESM seems to confuse Node, even with the proper type. I have not found a way to force dependencies to use modules. Kinda stuck, any ideas?

A workaround would be to bundle everything (except the 3rd party dependencies like canvas, gl, etc) so that it’s a single file. Providing cjs and mjs files seems like it would work.

---

EDIT: think I figured out what needs to happen here:

TODO

• Add exports to assets (#8504)
• Bundle ismobilejs or add to adapter (#8506)
• Rename esm extension to “.mjs” for all packages (#8505)

[UltraCakeBakery]

I came across https://antfu.me/posts/publish-esm-and-cjs a while ago when I was running into this issue with a side project I’m working on. The configurations used in the package.json might be helpful here

[Julien-Marcou]

NodeJS requires a .mjs extension or "type": "module" inside the package.json in order to import a file as an ES Module.

I don’t know if it’s possible to have several package.json, one per distribution.

EDIT:

Looks like it’s possible: https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html

For each packages, adding a dist/esm/package.json, that contains:

{
  "type": "module"
}

And a dist/cjs/package.json that contains:

{
  "type": "commonjs"
}

Seems to be a solution.