vitest cannot load npm dependency (TypeError: default is not a function)

[lukasz-madon]

Describe the bug

Basic setup of vitest with vue and parcel fails with TypeError: default is not a function. I'm building js with parcel but want to run the tests with vitest. Is there a way to import module like vuex-shared-mutations? My guess is that libraries need module export with default where parcel resolver is more forgiving. Is there such option?

 npm test
> test
> vitest --environment jsdom

 ❯ tests/app.spec.js (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/app.spec.js [ tests/app.spec.js ]
 ❯ js/store.js:59:26
     57| const store = createStore({
     58|   plugins: [
     59|     createMutationsSharer({
       |                          ^
     60|       predicate: [
     61|         'set_messages',

❯ async ui/js/axiosInterceptor.js:3:31
❯ async ui/js/components/search/SearchBar.vue:4:31
❯ async ui/js/components/AppHeader.vue:8:31
❯ async ui/js/components/App.vue:2:31
❯ async ui/js/components/EntryApp.vue:2:31
❯ async ui/tests/app.spec.js:6:31

Test Files  1 failed (1)
     Tests  no tests
  Start at  17:00:48
  Duration  2.79s (transform 958ms, setup 0ms, collect 0ms, tests 0ms)

TypeError: default is not a function
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯```

vite.config.js

```js
import { fileURLToPath, URL } from 'url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // resolve: {
  //   // alias: {
  //   //   '@': fileURLToPath(new URL('./js', import.meta.url)),
  //   // },
  // },
});

// tests/app.spec.js
import { describe, it, expect } from 'vitest';

import { mount, shallow } from '@vue/test-utils';
import EntryApp from '../js/components/EntryApp.vue';

describe('EntryApp', () => {
  it('renders properly', () => {
    const wrapper = mount(EntryApp, { props: { msg: 'Hello Vitest' } });
    expect(wrapper.text()).toContain('Hello Vitest');
  });
});

// store.js
import { createStore } from 'vuex';
import createMutationsSharer from 'vuex-shared-mutations';
import VuexPersistence from 'vuex-persist';

{
  "scripts": {
    "init": "git config core.hooksPath .husky",
    "prettier": "npx prettier js --check",
    "prettier:fix": "npm run prettier js --write",
    "lint": "eslint --ext js,vue . --max-warnings 0",
    "preview": "vite preview --port 5050",
    "test": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "prod": "rm -rf ../src/P2/dist && NODE_ENV=production parcel build js/main.js css/style.scss css/session.scss --no-source-maps --no-cache --dist-dir dist",
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@parcel/css": "^1.14.0",
    "@parcel/source-map": "^2.1.1",
    "@parcel/transformer-image": "^2.6.2",
    "@parcel/transformer-sass": "^2.6.2",
    "@parcel/transformer-vue": "^2.6.2",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@vitejs/plugin-vue": "^3.1.2",
    "@vue/test-utils": "^2.1.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "cypress": "^10.9.0",
    "eslint": "^8.21.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-no-loops": "^0.3.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.3.0",
    "events": "^3.3.0",
    "husky": "^8.0.1",
    "jsdom": "^20.0.1",
    "parcel": "^2.6.2",
    "parcel-resolver-exclude-assets": "2.0.0",
    "prettier": "^2.7.1",
    "prettier-eslint": "^15.0.1",
    "process": "^0.11.10",
    "sass": "1.54.0",
    "start-server-and-test": "^1.14.0",
    "stream-browserify": "^3.0.0",
    "vite": "^3.1.0",
    "vitest": "^0.22.1",
    "vue-eslint-parser": "^9.0.3",

  },
  "dependencies": {
    "@adamdehaven/vue-custom-tooltip": "^2.6.0",
    "@chenfengyuan/vue-number-input": "^2.0.1",
    "@parcel/bundler-default": "2.6.2",
    "@parcel/config-default": "2.6.2",
    "@popperjs/core": "2.11.5",
    "@vuepic/vue-datepicker": "^3.4.0",
    "@vueuse/components": "^9.0.2",
    "@vueuse/core": "^9.0.2",
    "axios": "0.27.2",
    "axios-auth-refresh": "^3.3.3",
    "dayjs": "^1.11.4",
    "vue": "^3.2.37",
    "vue-advanced-cropper": "next",
    "vue-matomo": "^4.1.0",
    "vue-numeric-input": "^2.0.0",
    "vue-router": "^4.1.3",
    "vue-tel-input": "^6.0.3",
    "vue-timeago3": "^2.3.0",
    "vuex": "^4.0.2",
    "vuex-persist": "^3.1.3",
    "vuex-shared-mutations": "^1.0.2"
  },
  "resolverExcludeAssets": [
    "../../images",
    "../../svg"
  ]
}

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-ssxqij?file=test/app.spec.js

System Info

System:
    OS: macOS 12.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 65.00 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.8.0 - ~/.nvm/versions/node/v17.8.0/bin/node
    npm: 8.7.0 - ~/.nvm/versions/node/v17.8.0/bin/npm
    Watchman: 2022.02.28.00 - /usr/local/bin/watchman

    @vitejs/plugin-vue: ^3.1.2 => 3.1.2
    vite: ^3.1.0 => 3.1.0
    vitest: ^0.22.1 => 0.22.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Your reproduction doesn't work. Please, create a minimal reproduction that I can actually run. (Exclude all dependencies that are not needed)

[github-actions]

Hello @lukasz-madon. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[lukasz-madon]

@sheremet-va Hey, I updated the example.

[vivipure]

It should be a problem with the vuex-shared-moudle dependency, which is a UMD-formatted package, and Vitest requires ESM.

[sheremet-va]

I don't think there is an easy way to fix this, to be honest. We do try to resolve to default.default in cases, where packages have __esModule conventional property, but I am not sure how safe it is to use on any package. You should access it as:

import createMutationsSharer from 'vuex-shared-mutations';

createMutationsSharer.default()

[skuridin]

I have the same issue with axios-auth-refresh module.

Using .default() fixes the tests by breaks the real app with default is not a function error. The app and tests share the same vite.config.ts

[thiago-silva-ac]

Updates? Having same issue

[lukasz-madon]

it seems updating the vitest to 0.26+ solves it