bug: vue, remove commonjs modules now that ionic core is all es modules

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Unit Tests with vitest fail due to the following issue:

I already added the proposed workaround to the vitest config, but the issue persists.

Expected Behavior

Unit tests with vitest should not fail to run when an ionic component is used in the tested component.

Steps to Reproduce

Simply check out the example project i provided below and run npm i and npm test. The test for the component including an ionic component will fail with the message above.

Code Reproduction URL

https://github.com/kaischo/vitest_ionic_minimal

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/kai/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.0.16

Capacitor:

Capacitor CLI : 3.4.3 @capacitor/android : not installed @capacitor/core : 3.4.3 @capacitor/ios : not installed

Utility:

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

System:

NodeJS : v16.14.2 (/Users/kai/.nvm/versions/node/v16.14.2/bin/node) npm : 8.5.0 OS : macOS Big Sur

Additional Information

Adding @ionic/core to the inline deps field of the vitest config does not seem to help for some reason. Vitest output suggests the following: Module /Users/kai/Desktop/ionic test/vitest_minimal/node_modules/@ionic/core/components/ion-accordion.js:4 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@ionic/core" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

I am thankful for any tips how to fix this issue on my own or any workarounds.

[liamdebeasi]

Thanks for the issue. I am still digging into this, but it looks like the @ionic/vue package ships with CommonJS and ES Module files whereas @ionic/core only ships as ES Modules. Vitest/Vite loads the CommonJS version of Ionic Vue, which loads the ES Module version of Ionic Core. As a result, this error occurs.

We should probably get rid of the CommonJS version now that we are using ES Modules. Though it is a bit surprising that Vite/Vitest is not loading the ES Module version of @ionic/vue by default.

edit: We should probably make this change for React as well.

[SimonGolms]

I ended up here due to the same error in react and none of the mentioned workarounds (with react adaptation) worked in my case. However, what solved it was adding the property resolve: { mainFields: ['module'] } to vite.config.ts from this issue: https://github.com/vitest-dev/vitest/issues/1452#issuecomment-1150752644

/// <reference types="vitest" />
/// <reference types="vite/client" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  resolve: {
    // Workaround to fix inline dependency of a dependency, which is the case in @ionic/react
    mainFields: ['module'],
  },
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});

---

EDIT: After further attempts and following the way to test ionic-react components with reference to the blog post (Testing Ionic React Apps with Jest and React Testing Library), it fails again with the library @ionic/react-test-utils, which currently cannot resolve the modules furthermore.