cloudflare / cloudflare/vinext
CommonJS default import from `use-media` resolves to an object in `vinext dev`
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 406
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 120
Description
### Versions
- `vinext`: `0.0.50`
- `vite`: `8.0.13`
- `next`: `16.2.x`
- Router: App Router
### Summary
A client component that imports the default export from the CommonJS package `use-media` crashes in the browser under `vinext dev`.
The same code worked under Next.js/Webpack. In vinext, the imported value is not the hook function at runtime, so calling it throws `useMedia is not a function`.
This seems related to CommonJS/ESM interop in the dev client runtime, but it is different from #1220: the dev server starts successfully here, and the failure happens in the browser during hydration.
### Error
```txt
TypeError: useMedia is not a function
SidebarProvider
/modules/sidebar/index.tsx:86:19
```
### Repro
```tsx
'use client';
import useMedia from 'use-media';
export function SidebarProvider() {
const isMobile = useMedia({ maxWidth: 767 });
return
}
```
### Package Details
`use-media@1.5.0` is CommonJS. Its package entry is `lib/index.js`:
```js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMediaLayout = exports.useMedia = exports.default = void 0;
var useMedia_1 = require("./useMedia");
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return useMedia_1.default;
},
});
Object.defineProperty(exports, "useMedia", {
enumerable: true,
get: function () {
return useMedia_1.useMedia;
},
});
```
### Expected
The default import should resolve to the hook function:
```ts
typeof useMedia === 'function'
```
### Actual
In the browser runtime under `vinext dev`, the default import resolves to a non-callable object, causing:
```txt
TypeError: useMedia is not a function
```
### Notes
This is related to #1220 in the broad sense that both involve hard-to-debug CJS dependency behavior, but the failure mode is different:
- #1220: dev server exits during dependency optimization.
- This issue: dev server starts successfully, but the browser crashes during hydration.
The overlay points at app code, but the underlying problem appears to be the dependency import shape changing under vinext dev.
Contributor guide
Assessment
This issue has not been assessed yet.