bug: Directory import is not supported resolving ES modules

[rthouvenin]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When I run unit tests in a component library that I am building, I face the following error:

Error: Directory import '[domain-lib-repo]/node_modules/@ionic/core/components' is not supported resolving ES modules imported from '[domain-lib-repo]/node_modules/@ionic/vue/dist/index.js Did you mean to import "@ionic/core/components/index.js"?

Expected Behavior

Ability to run unit tests with vitest without a build error.

Steps to Reproduce

In the project I am working on, I am producing a "generic" components library, use by a "domain-specific" components library, and both are used in the final app. Both libs are build with Vite in lib mode with rollup, with vue and @ionic/vue declared as dev and peer dependencies, and rollup configured to treat these packages as external. Here is what the vite config looks like:

export default defineConfig({
  plugins: [vue(), dts({ insertTypesEntry: true })],
  build: {
    lib: {
      entry: "src/index.ts",
      name: "MyLib",
      fileName: "my-lib",
    },
    rollupOptions: {
      external: ["vue", "vue-i18n", "vue-router", "@ionic/vue"],
      output: {
        globals: {
          vue: "Vue",
          "vue-i18n": "VueI18n",
          "vue-router": "VueRouter",
          "@ionic/vue": "IonicVue",
        },
      },
    },
  },
});

When I run unit tests in the domain-specific library, I face the following error:

Error: Directory import '[domain-lib-repo]/node_modules/@ionic/core/components' is not supported resolving ES modules imported from '[domain-lib-repo]/node_modules/@ionic/vue/dist/index.js Did you mean to import "@ionic/core/components/index.js"?

Interestingly, out of the two components that I have started writing, the tests for one of them work fine, but not the other. The only relevant difference I can see is that the failing component makes use of a component from the "generic" library.

Unfortunately, I was not able to create a minimum reproducing scenario so far. But I notice that in @ionic/vue/dist/index.js, there is an import line 80 (for version 8.7.7) to @ionic/core/components:

import { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, initialize, modalController as modalController$1, popoverController as popoverController$1, alertController as alertController$1, actionSheetController as actionSheetController$1, loadingController as loadingController$1, pickerController as pickerController$1, toastController as toastController$1 } from '@ionic/core/components';

Since the package now exports only an ES module, isn't that an incorrect statement in the build output of @ionic/vue? Shouldn't it be @ionic/core/components/index.js like the error mentions?

Code Reproduction URL

• https://www.npmjs.com/package/@ionic/vue/v/8.7.7?activeTab=code
• https://gitlab.com/rthouvenin/ionic-repro

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/home/romain/.nvm/versions/node/v20.19.5/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.4.2

Capacitor:

Capacitor CLI : 6.2.1 @capacitor/android : 6.2.0 @capacitor/core : 6.2.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.19.5 (/home/romain/.nvm/versions/node/v20.19.5/bin/node) npm : 10.8.2 OS : Linux 6.8

Additional Information

No response