External request: (newinstall) ember-power-select is trying to import from @embroider/virtual

[SemaLuna]

Description of the problem

In a completely new ember app, adding Helios then trying to use the component leads to some obscure embroider issue during build.

Steps to repro:

1. Create new ember typescript app (using ember-cli@6.12.0

ember new sample-app --typescript --strict --lang en

2. Install Helios
   npm install @hashicorp/design-system-components@6.4.0

3. Import the component and try to use it (e.g. in templates/application.gts)

import {
  HdsButton,
} from '@hashicorp/design-system-components/components';

<template>
  {{outlet}}

  <HdsButton @size={{@buttonSize}} @text="Save" type="submit" />
</template>

4. Try to run a build (seen the issue with just running a normal dev server too)
   npm run build

5. ERROR

vite v8.1.5 building client environment for production...
Environment: production
cleaning up...
Built project successfully. Stored in "/home/node/app/sample-app/tmp/compat-prebuild".
<script src="/@embroider/virtual/vendor.js"> in "/index.html" can't be bundled without type="module" attribute

/@embroider/virtual/app.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 792 modules transformed.
✗ Build failed in 8.62s
error during build:
Build failed with 1 error:

[plugin embroider-resolver]
Error: ember-power-select is trying to import from @embroider/virtual but that is not one of its explicit dependencies
    at Resolver.preHandleExternal (/home/node/app/sample-app/node_modules/@embroider/core/dist/src/module-resolver.js:871:19)
    at Resolver.beforeResolve (/home/node/app/sample-app/node_modules/@embroider/core/dist/src/module-resolver.js:83:24)
    at async Resolver.resolve (/home/node/app/sample-app/node_modules/@embroider/core/dist/src/module-resolver.js:95:19)
    at async resolveId (file:///home/node/app/sample-app/node_modules/@embroider/vite/dist/src/resolver.js:45:26)
    at async PluginContextImpl.resolveId (file:///home/node/app/sample-app/node_modules/@embroider/vite/dist/src/resolver.js:127:30)
    at async plugin (file:///home/node/app/sample-app/node_modules/rolldown/dist/shared/bindingify-input-options-XPJLJOD0.mjs:1418:16)
    at async plugin.<computed> (file:///home/node/app/sample-app/node_modules/rolldown/dist/shared/bindingify-input-options-XPJLJOD0.mjs:1959:12)
    at aggregateBindingErrorsIntoJsError (file:///home/node/app/sample-app/node_modules/rolldown/dist/shared/error-BHRSI0R7.mjs:48:18)
    at unwrapBindingResult (file:///home/node/app/sample-app/node_modules/rolldown/dist/shared/error-BHRSI0R7.mjs:18:128)
    at #build (file:///home/node/app/sample-app/node_modules/rolldown/dist/shared/rolldown-build-CtPvmZgJ.mjs:3276:34)
    at async buildEnvironment (file:///home/node/app/sample-app/node_modules/vite/dist/node/chunks/node.js:33061:66)
    at async Object.build (file:///home/node/app/sample-app/node_modules/vite/dist/node/chunks/node.js:33483:19)
    at async Object.buildApp (file:///home/node/app/sample-app/node_modules/vite/dist/node/chunks/node.js:33480:153)
    at async CAC.<anonymous> (file:///home/node/app/sample-app/node_modules/vite/dist/node/cli.js:776:3) {
  errors: [Getter/Setter]
}

Possible suggested solution

Adding overrides in the package.json for ember-power-select / ember-basic-dropdown (and then running npm install) does seem to fix it (though I don't know if there will be future limitations down the line as I try more things)

  "overrides": {
    "ember-power-select": "^9.0.1",
    "ember-basic-dropdown": "^9.0.0"
  }

[alex-ju]

@SemaLuna thanks for raising this! can you confirm the ember version used in your project?

[SemaLuna]

@alex-ju Hi Alex - I used Ember 6.12 (LTS)

[alex-ju]

@alex-ju Hi Alex - I used Ember 6.12 (LTS)

Thanks @SemaLuna! We're actively investigating this issue, which appears to stem from an incompatibility with ember-power-select v9. If possible, switching to v8 should unblock you while we work on a fix.