Module fails to import when running vitest

[carsakiller]

Describe the bug

I am trying to write some tests for the components of my webview that uses Vue, TypeScript, Vite, Vitest.

When running vitest on a component that imports @vscode/webview-ui-toolkit, an error is thrown:

Cannot find module 'webview-test\node_modules@vscode\webview-ui-toolkit\dist\vscode-design-system' imported from webview-test\node_modules@vscode\webview-ui-toolkit\dist\index.js

In production and when testing in the VS Code webview, everything loads fine. It is only when using vitest that things break.

If I manually open @vscode/webview-ui-toolkit/dist/index.js and do:

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
- export * from './vscode-design-system';
+ export * from './vscode-design-system.js';
export * from './custom-elements';
// Export components and classes
export * from './badge/index';
export * from './button/index';
export * from './checkbox/index';
export * from './data-grid/index';
export * from './divider/index';
export * from './dropdown/index';
export * from './link/index';
export * from './option/index';
export * from './panels/index';
export * from './progress-ring/index';
export * from './radio-group/index';
export * from './radio/index';
export * from './tag/index';
export * from './text-area/index';
export * from './text-field/index';

I then get a different error where it can't find the custom-elements module. Adding the .js file extension as I did above then results in yet another error, this time for badge/index.

To reproduce

I have a basic repo for seeing the issue:
carsakiller/webview-test

1. Clone the above
2. npm i to install dependencies
3. npm run test to run vitest

Expected behavior

The module should import with no errors, allowing vitest to mount a component that imports @vscode/webview-ui-toolkit

Current behavior

There are a series of errors when attempting to import from this module. The VS Code styling is not necessary for my tests, so if there is a way to just not import them when testing to prevent the error, that could work.

Desktop (please complete the following information):

• OS Version: Windows 11 Build 22621
• Toolkit Version: v1.2.0

[hawkticehurst]

Hey @carsakiller!

Thanks for the bug report, it seems like this is probably a duplicate of #432, in which case I literally have a patch fix that I'll be releasing tomorrow!

In meantime thank you for the reproduction sample, it's extremely helpful and I'll use it to test the patch I'm working on.

[hawkticehurst]

Nice, I cloned your reproduction example and was able to fix the error with the patch I'm working on 😊

*A new error is now present that seems to be caused by an upstream dependency of the toolkit called FAST, so you may end up having to file an issue with them but I figure we can at least ship this fix first before tackling the next issue

[carsakiller]

Awesome! Glad my example could help!

Yeah, after manually appending the file extensions I ran into that issue as well, unfortunately. I'll check out your fix tomorrow and then get started on the next issue I guess 😄