Skip to content

bug: Directory import is not supported resolving ES modules #30730

@rthouvenin

Description

@rthouvenin

Prerequisites

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions