XState doesn't work with either embroider-safe or embroider-optimized scenarios?

I noticed this on CI, but I’m testing locally with

node_modules/.bin/ember try:one embroider-safe --skip-cleanup --- ember s -p 4201

both imports don’t work:

import {...} from 'xstate';
import {...} from 'xstate/es';

XState’s relevant package.json entries:

  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "lib/index.d.ts",

(I confirm that all these files exists)

Versions of things at the time of running:

    "@embroider/compat": "0.40.0",
    "@embroider/core": "0.40.0",
    "@embroider/test-setup": "^0.40.0",
    "@embroider/webpack": "0.40.0",
    "xstate": "^4.18.0"

XState, in my addon, is both a devDependency and a peerDependency – but moving xstate to a regular dependency doesn’t change anything.

My addon’s embroider config:

'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {});

  const { maybeEmbroider } = require('@embroider/test-setup');

  return maybeEmbroider(app, {
    packageRules: [
      {
        package: 'dummy',
        components: {
          '{{toggle}}': { safeToIgnore: true },
          '{{toggle-machine}}': { safeToIgnore: true },
          '{{report}}': { safeToIgnore: true },
        },
      },
    ],
  });
};

The error I get:

Uncaught Error: Could not find module `xstate/es` imported from `(require)`
    missingModule loader.js:247
    findModule loader.js:258
    requireModule loader.js:24
    <anonymous> es.js:1
    js chunk.62c601a0ec9371568b5d.js:213
    __webpack_require__ chunk.a285fd98a411feb3069e.js:64
    <anonymous> statechart-manager.js:5

it’s the same if I say just “xstate”, shown here:

Uncaught Error: Could not find module `xstate` imported from `(require)`
    missingModule loader.js:247
    findModule loader.js:258
    requireModule loader.js:24
    <anonymous> xstate.js:1
    js chunk.380d08940477220a3a0d.js:213
    __webpack_require__ chunk.a285fd98a411feb3069e.js:64
    <anonymous> statechart-manager.js:5

Something strange I noticed when I was looking at the contents of /tmp/embroider/87df42 is that xstate is the only symlinked node_modules. but why?

[ef4]

The whole “by side-effect” thing happens under ember-auto-import in a classic build because in that case we’re flattening down all dependencies into a flat namespace, to interoperate with the runtime AMD loader. Under embroider, we don’t need to do that, which is why the dummy app having access to xstate doesn’t leak into giving the addon access to xstate.

[ef4]

This has nothing to do with xstate.

You’re trying to import from NPM in a v1 addon without ember-auto-import. That never works. Embroider follows the same rules as the traditional build in this respect. Move ember-auto-import from devDependencies to dependencies so your addon is allowed to use it, and that fixes the problem.

Your test suite is failing to notice that your addon is actually broken under non-embroider builds, too. The problem is that the dummy app directly imports from xstate, which is allowed because the dummy app can use ember-auto-import as a devDependency. As a side effect, this makes xstate available to the addon code too. But as soon as the addon tried to run without the dummy app, it would be broken.