Vitest error: Module ix-action-card seems to be an ES Module but shipped in a CommonJS package

[umar-shabbir]

Prerequisites

• [X] I have not leaked any internal company information.
• [X] I have not posted internal links or code snippets.

What happened?

Unable to use Vitest for running tests in my react app. @siemens/ix-react is added in dependencies of this app. When running test with Vitest, it gives following error:

"Module ix-action-card seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@siemens/ix" asking them to ship the file in .mjs extension or add "type": "module" in their package.json"

SyntaxError: Cannot use import statement outside a module
 ❯ Object.<anonymous> node_modules/@siemens/ix-react/dist/index.js:7:25
      5| const React = require('react');
      6| const ReactDOM = require('react-dom');
      7| const ixActionCard_js = require('@siemens/ix/components/ix-action-card.js');
       |                         ^
      8| const ixApplicationHeader_js = require('@siemens/ix/components/ix-application-header.js');
      9| const ixAvatar_js = require('@siemens/ix/components/ix-avatar.js');

What type of frontend frameware are you seeing the problem on?

React

Which version of iX do you use?

v2.1.0

Code to produce this issue.

1. Clone https://github.com/umar-shabbir/ix-issue-1123
2. Run npm install
3. Run npm run test

[danielleroux]

Please provide a repository (github) which shows the behavior.

[umar-shabbir]

Please provide a repository (github) which shows the behavior.

@danielleroux I have updated the issue with link to repository

[danielleroux]

Its part of our sprint roadmap for v3. Removing commonjs will result in a breaking change.

[Ix-956]

[umar-shabbir]

Its part of our sprint roadmap for v3. Removing commonjs will result in a breaking change.

[Ix-956]

Thanks @danielleroux. Can you suggest me any alternate solution for now? Do I need to try some other test runner? I want to test my components (which depend on ix components) using React Testing Library. To run these tests, I need a test runner and Vitest didn't work as mentioned. I also could not make Jest work with Ix. Similar error appears with Jest too:

SyntaxError: Cannot use import statement outside a module

      1 | import { useState } from 'react';
    > 2 | import {
        | ^
      3 |   IxButton,
      4 |   IxIconButton,
      5 |   IxContentHeader,

[james-williams-siemens]

For jest we added the following to package.json:

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(@siemens|@stencil))"
    ]
  }

[Gorfdie]

Hello, I work for Siemens and have the same problem with the same import. We use react on a nextjs project and when I updated from version 1.6.3 to 2.1.1 it had a problem when compiling:

.../node_modules/@siemens/ix/components/ix-action-card.js:1 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

is there any solution to this?