Test error on @primer/react/lib/drafts/hooks/useCombobox.js

[hyochan]

Description

I am facing a test error after installing the package.

Error: require() of ES Module /Users/hyo/Github/doobooio/dooboo.io/node_modules/@github/combobox-nav/dist/index.js from /Users/hyo/Github/doobooio/dooboo.io/node_modules/@primer/react/lib/drafts/hooks/useCombobox.js not supported.
Instead change the require of index.js in /Users/hyo/Github/doobooio/dooboo.io/node_modules/@primer/react/lib/drafts/hooks/useCombobox.js to a dynamic import() which is available in all CommonJS modules.

I am currently using vitest. Can I get any clue on the error? I've also tried mocking.

Steps to reproduce

1. Clone project

   https://github.com/hyochan/react-typescript-vite
   

2. Install package.
3. Wrap root with ThemeProvider.
4. Run test pnpm test.

Version

v35.9.0

Browser

Chrome

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

It's still happening in v35.10.0.

[joshblack]

Hi there! 👋 Thanks for taking the time to make this bug report 🙏

This should be addressed in the latest Release Candidate (35.11.0-rc.65a8bb8a) which should be published this week. I used this version in the test repo and it seems to have addressed the problem but let me know if not!

I'll also make sure to update this issue once the latest RC is promoted to stabe 👍

[filipedeschamps]

@joshblack using the RC 35.11.0-rc.65a8bb8a version I'm receiving another error:

Server Error
Error: Cannot find module '../../node_modules/@github/combobox-nav/dist/index.js'
Require stack:
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/drafts/hooks/useCombobox.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/drafts/InlineAutocomplete/_AutocompleteSuggestions.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/drafts/InlineAutocomplete/InlineAutocomplete.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/FormControl/FormControl.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/CheckboxGroup.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/@primer/react/lib/index.js
- /Users/filipedeschamps/local/company/tabnews.com.br/.next/server/pages/_app.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/server/require.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/server/next-server.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/server/next.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/server/lib/start-server.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/cli/next-dev.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/lib/commands.js
- /Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/bin/next

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Function.Module._resolveFilename
node:internal/modules/cjs/loader (956:15)
Function.mod._resolveFilename
file:///Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/build/webpack/require-hook.js (27:32)
Function.mod._resolveFilename
file:///Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/build/webpack/require-hook.js (27:32)
Function.mod._resolveFilename
file:///Users/filipedeschamps/local/company/tabnews.com.br/node_modules/next/dist/build/webpack/require-hook.js (27:32)

[filipedeschamps]

The same error goes for the version you just published: 35.11.0-rc.66f86207

[filipedeschamps]

This regression started in this release: https://github.com/primer/react/releases/tag/v35.6.0

[joshblack]

Hey @filipedeschamps! Thanks for following up on this. Just a quick update on my end, it seems like there is a publishing flow that came up for this that I talked about over in: #2404 (comment)

I have a PR open for this upstream that should address this: primer/.github#8. Once that's in, we can revert the changes from #2404 and this issue should be addressed.

Ultimately the challenge from the CommonJS side is that the upstream @github/* modules are ESM-only and so we're trying to figure out the best way to ship support for them for the CommonJS side of things.

Sorry again about the delay here, will make sure to update this as things progress!

[joshblack]

Just wanted to follow-up on this, this should be addressed as of 35.12.0! 🥳

Going to close this issue out as a result, but let me know if you're still running into this and I can re-open!