Not compatible with modern tooling without polyfilling nodeisms

[MichalBryxi]

Not sure which side is the problematic one (Ember / Embroider / statelyai/inspect / ?), but to document this:

// package.json
    ...
  "devDependencies": {
    "ember-statechart-component": "^7.1.0",
    "@statelyai/inspect": "^0.4.0",
    "xstate": "^5.19.0"
  }
    ...

// machine.ts

import { setup } from 'xstate';
import { createBrowserInspector } from '@statelyai/inspect';

const { inspect } = createBrowserInspector();

const machine = setup({ ... }).createMachine({ ... });

Produces following errors:

router.js:1323 Error while processing route: add-a-building ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ../../.pnpm/@statelyai+inspect@0.4.0_ws@8.18.0_xstate@5.19.0/node_modules/@statelyai/inspect/dist/index.js Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ../../.pnpm/@statelyai+inspect@0.4.0_ws@8.18.0_xstate@5.19.0/node_modules/@statelyai/inspect/dist/index.js

and

Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ../../.pnpm/@statelyai+inspect@0.4.0_ws@8.18.0_xstate@5.19.0/node_modules/@statelyai/inspect/dist/index.js
    at Object.set [as exports] 

Environment:

pnpm exec ember version
ember-cli: 6.0.1
node: 20.18.0
os: darwin arm64

We're talking embroider enabled build based on webpack. I suspect that might play a role:

    "@embroider/compat": "^3.7.0",
    "@embroider/core": "^3.4.19",
    "@embroider/webpack": "^4.0.8",

[MichalBryxi]

Kickstarted a conversation on EmberJS discord

[NullVoxPopuli]

To me, it looks like the package is built incorrectly.

https://www.npmjs.com/package/@statelyai/inspect?activeTab=code

Module isn't a thing in esm, so it would errors ... Or it requires special webpack or vite configuration to polyfill module.

Ember won't polyfill this sort of stuff because doing so would perpetuate bad patterns in the ecosystem.

It's probably just an oversight. This sort of compilation was common in the old days.

But the inspect package needs to use package.json#exports and provide per-format compilation (the rest of xstate already makes heavy and good use of package.json#exports)

[NullVoxPopuli]

@MichalBryxi i'd rename this issue to 'not compatible with modern tooling without polyfilling nodeisms' (webpack 5, vite)

[davidkpiano]

If you know of a potential fix, I'd appreciate a PR for it 🙏