cloudflare / cloudflare/vinext

Dev client serves use-sync-external-store/shim/index.js as raw CJS, causing missing named export

Open
#1,207 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
406
Avg merge
2d 6h
Merged PRs (30d)
120

Description

`use-sync-external-store/shim/index.js` served as raw CJS in dev

### Versions

- `vinext`: `0.0.49`
- `vite`: `8.0.13`
- `next`: `16.2.3`
- Router: App Router

### Error

In `vinext dev`, the browser shows:

```txt
The requested module '/node_modules/use-sync-external-store/shim/index.js?...'
does not provide an export named 'useSyncExternalStore'
```

### Cause

A dependency imports the React compatibility shim like this:

```ts
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
```

In my app this came from `@react-stately/toast`.

`use-sync-external-store/shim/index.js` is CommonJS:

```js
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('../cjs/use-sync-external-store-shim.production.js');
} else {
module.exports = require('../cjs/use-sync-external-store-shim.development.js');
}
```

But in dev, vinext/Vite serves it to the browser as if it were ESM, so the named export does not exist.

### Expected

vinext/Vite should prebundle or transform this common React compatibility shim correctly, or handle the exact nested import path automatically.

### Actual

The app fails in the browser with a runtime overlay. The error is technically accurate, but hard to trace back to the nested dependency import.

### Workaround

I fixed it by aliasing both shim paths to a local ESM shim:

```ts
// use-sync-external-store-shim.ts
import { useSyncExternalStore } from 'react';

export { useSyncExternalStore };

export default { useSyncExternalStore };
```

```ts
// vite.config.ts
import path from 'node:path';

export default defineConfig({
resolve: {
alias: [
{
find: /^use-sync-external-store\/shim(?:\/index\.js)?$/,
replacement: path.resolve(__dirname, 'use-sync-external-store-shim.ts'),
},
],
},
optimizeDeps: {
include: [
'use-sync-external-store/shim',
'use-sync-external-store/shim/index.js',
],
},
});
```

After this, `vinext dev -- --force` loads the affected routes without the browser runtime error.

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.