Error with botframework-webchat because of CommonJS Dependencies

justin-mellor commented 1 month ago

Describe the bug

If you import botframework-webchat you get an error when you run vitest.

SyntaxError: Named export 'useRefFrom' not found. The requested module 'use-ref-from' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'use-ref-from';

Have tried using deps options to try and get it to work, but can't seem to get anything to work Initially raised this against botframework-webchat, but think this is actually a problem with vitest https://github.com/microsoft/BotFramework-WebChat/issues/5011

Reproduction

See https://github.com/justin-mellor/vitest-botframework-webchat

This is a simple vue site build using create-vue that I have modified to include botframework-webchat in the HelloWorld component

If you run npm run build it all builds fine but if you run npm run test:unit you get the error

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 13.47 GB / 31.85 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 128.0.6613.138
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-vue: ^5.0.5 => 5.1.3
    vite: ^5.4.5 => 5.4.5
    vitest: ^2.1.0 => 2.1.0

Used Package Manager

npm

Validations

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

hi-ogawa commented 1 month ago

There are probably some packaging issues and NodeJs cannot import botframework-webchat.

For example, use-ref-from's exports["."].import.default is broken https://publint.dev/use-ref-from@0.1.0 and this is the error on NodeJs:

// repro.mjs
import "use-ref-from"

// $ node repro.mjs
// /home/hiroshi/code/tmp/vitest-botframework-webchat/node_modules/.pnpm/use-ref-from@0.1.0_react@18.3.1/node_modules/use-ref-from/lib/esmodules/index.js:1
// import useRefFrom from './useRefFrom';
// ^^^^^^

// SyntaxError: Cannot use import statement outside a module
//     at wrapSafe (node:internal/modules/cjs/loader:1378:20)

To workaround this on Vitest, you can probably tweak test.server.deps.inline, but it'll probably require adding all the dependency chains till use-ref-from, meaning every dependencies appearing in pnpm why like this:

$ pnpm why use-ref-from

dependencies:
botframework-webchat 4.18.0
├─┬ botframework-webchat-api 4.18.0
│ └── use-ref-from 0.1.0
└─┬ botframework-webchat-component 4.18.0
  ├─┬ botframework-webchat-api 4.18.0
  │ └── use-ref-from 0.1.0
  ├─┬ use-propagate 0.1.0
  │ └── use-ref-from 0.0.3
  └── use-ref-from 0.1.0

hi-ogawa commented 1 month ago

I fiddled with test.server.deps.inline and test.deps.optimizer, but it looks like either ends up with some issues due to internal dependencies.

If you don't need to unit-test botframework-webchat by yourself, then the simplest workaround would be to just mock this dependency like vi.mock('botframework-webchat', () => ({ renderWebChat: vi.fn() })).

justin-mellor commented 1 month ago

@hi-ogawa thanks for the suggestion. Mocking the call is perfect as I don't want to test the component itself.

vitest-dev / vitest