cloudflare / cloudflare/vinext

CommonJS default import from `use-media` resolves to an object in `vinext dev`

Open
#1,221 1 comment 0 reactions 0 assignees View on GitHub
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

{isMobile ? 'mobile' : 'desktop'}
;
}
```

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.