Vitest is encountering failures specifically related to the botframework-webchat module.

[rishabh0803]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest)

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

No response

Please describe the bug

Error Message: The failure is manifested with the following error:

Error: require() of ES Module C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\mdast-util-from-markdown\dev\index.js 
from 
C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\botframework-webchat-component\lib\Attachment\Text\private\LinkDefinitions.js not supported.

Instead change the require of index.js in C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\botframework-webchat-component\lib\Attachment\Text\private\LinkDefinitions.js 
to a dynamic import() which is available in all CommonJS modules.

Versions:

• vite: 5.0.11
• vitest: 1.2.1
• node: 18.2.0
• typescript: 5.3.3
• react: 18.2.0
• botframework-webchat: 4.16.0

Investigation: Upon investigation, it has been identified that an internal dependency named mdast-util-from-markdown is exclusively ESM (ECMAScript Module) compatible. This incompatibility prevents direct consumption of the main botframework-webchat module in the latest Node.js environments where tests are executed.

Proposed Solution: The recommended approach for consumers of mdast-util-from-markdown should adhere to the following guidelines:

Refer to the installation instructions provided in the documentation of the module: Installation Guidelines

Additionally, consumers can consult the example provided in the GitHub Gist by sindresorhus for further clarity on usage: Usage Example

Note: Resolving this issue according to the proposed solution is expected to rectify the failing Vitest scenarios for the botframework-webchat module.

Do you see any errors in console log?

Error: require() of ES Module C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\mdast-util-from-markdown\dev\index.js from C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\botframework-webchat-component\lib\Attachment\Text\private\LinkDefinitions.js not supported.
Instead change the require of index.js in C:\office\bot-work\Skynet\TeamsDevOpsPortal\node_modules\botframework-webchat-component\lib\Attachment\Text\private\LinkDefinitions.js to a dynamic import() which is available in all CommonJS modules.

How to reproduce the issue?

Run tests using vitest consuming botframework-webchat npm package.

What do you expect?

Already propsed the solution above.

What actually happened?

Vitests start failing.

Do you have any screenshots or recordings to repro the issue?

NO

Adaptive Card JSON

No response

Additional context

No response

[OEvgeny]

I was able to recreate this problem. It looks like Vitest even with preconfigured happy-dom environment is trying to import the CommonJS compatible version of botframework-webchat, which isn't fully supported by Vitest (Vite itself converts CommonJS dependencies to ES modules under the hood more details).

I think we should be using the browser version for the test runs since it is dedeicated for environments like these where WebChat is usually used. This way, we can avoid any compatibility issues with CommonJS modules.

As the starting point check out this example: https://stackblitz.com/~/github.com/OEvgeny/botframework-webchat-vitest-demo?view=editor

It should be possible to further improve it to allign with how importing botframework-webchat module is done in your code.

[justin-mellor]

This issue has been open for a while now and even has a possible fix. Any idea if there is likely to be any movement on it?

[OEvgeny]

@justin-mellor we have other workloads for now, it's hard to tell when we'll be able to ship ESM builds for the WebChat.

Meanwhile there are ways to unblock testing with Vitest as shown in my previous message.

[compulim]

We are going to ship ESM real soon. 😉

https://github.com/microsoft/BotFramework-WebChat/pull/5148