Error during import of "design-react-kit" when using Vitest

[pizzandlove]

Hi everyone,

I am trying to use Vitest for tests, since I am already using Vite, but I am having a hard time testing my components which import something from "design-react-kit". In particular I get the following error: "Error: Failed to resolve entry for package "design-react-kit". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "design-react-kit" package".

To reproduce the error, you can open this stackblitz project and run in the console the following command npm run test.

In the project I've made two components: SimpleComponent.tsx, a simple component with just a div, and App.tsx, a component which uses the Alert component from design react kit. I have also made a test file for each of them. You will see that the first test passes and the other one fails (the App.test.tsx). The one that fails gives the described error.

I have looked for similar errors and found that it has to do with the way Vitest resolves dependencies, see this issue. I have tried different approaches, like the usage of alias in vite.config, but it didn't work. I have also found this fix, but I haven't tried it yet.
One workaround that seems to work is adding in the "design-react-kit" package.json the node option to the export:

  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "module": "./dist/index.js",
      "main": "./dist/index.cjs",
      "node": "./dist/index.cjs"
    }
  }

Now, while this seems to work, it isn't obviously a solution, unless the maintainers want to change the package.json. So I would like to know if there is anyone who had the same issue and was able to solve it without altering the "design-react-kit" files.

I was also wondering, shouldn't there be an immediate workaround, if it's worth trying to use Jest instead.

Thank you