cloudflare / cloudflare/vinext

App fails with styled-jsx default export error on vinext dev

Open
#3,133 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

While migrating my Next.js site to cloudflare, I used vinext and ran `npx vinext check` .
It returned zero issues: `Overall: 94% compatible (15 supported, 2 partial, 0 issues)`

## My Environment

- > Next.js: 16.1.6
- > vinext: 1.0.0-beta.8
- > @vinext/cloudflare: 1.0.0-beta.6
- > Vite: 8.2.2
- > React: 19.2.8
- > styled-jsx: 5.1.6
- > App Router

## The error
So I proceeded with `npx vinext init` and `npm run dev:vinext` and it crashes giving the following stack trace:

```
## Error Type

Runtime Error

## Error Message

The requested module '/node_modules/styled-jsx/style.js' does not provide an export named 'default'

## Stack

at SyntaxError: The requested module '/node_modules/styled-jsx/style.js' does not provide an export named 'default'

## Component Stack

at Lazy ()
at AwaitAppRenderDependencies [Server] ()
at BfcacheSlotBoundary (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:191:32)
at Slot (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:274:17)
at LayoutSegmentProvider (http://localhost:3001/node_modules/vinext/dist/shims/layout-segment-context.js?v=1d9373ba:41:34)
at RedirectErrorBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:63:3)
at RedirectBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:97:29)
at AppRouterScrollTargetInner (http://localhost:3001/node_modules/vinext/dist/shims/app-router-scroll.js?v=1d9373ba:83:34)
at AppRouterScrollTarget (http://localhost:3001/node_modules/vinext/dist/shims/app-router-scroll.js?v=1d9373ba:135:34)
at NotFoundBoundaryInner (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:185:3)
at NotFoundBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:221:29)
at Children (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:305:17)
at main ()
at body ()
at html ()
at RootLayout [Server] ()
at AppComponentDependencyBarrier [Server] ()
at BfcacheSlotBoundary (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:191:32)
at Slot (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:274:17)
at LayoutSegmentProvider (http://localhost:3001/node_modules/vinext/dist/shims/layout-segment-context.js?v=1d9373ba:41:34)
at ErrorBoundaryInner (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:107:3)
at ErrorBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:159:26)
at ErrorBoundaryInner (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:107:3)
at GlobalErrorBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:167:32)
at BfcacheSlotBoundary (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:191:32)
at Slot (http://localhost:3001/node_modules/vinext/dist/shims/slot.js?v=1d9373ba:274:17)
at NavigationCommitSignal (http://localhost:3001/node_modules/vinext/dist/server/app-browser-navigation-controller.js?v=1d9373ba:237:36)
at RedirectErrorBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:63:3)
at RedirectBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:97:29)
at AppRouterRedirectBridge (http://localhost:3001/node_modules/vinext/dist/server/app-browser-entry.js?v=1d9373ba:578:36)
at DevRecoveryBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:313:3)
at AppRouterScrollCommitProvider (http://localhost:3001/node_modules/vinext/dist/shims/app-router-scroll.js?v=1d9373ba:129:42)
at ErrorBoundaryInner (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:107:3)
at GlobalErrorBoundary (http://localhost:3001/node_modules/vinext/dist/shims/error-boundary.js?v=1d9373ba:167:32)
at BrowserRoot (http://localhost:3001/node_modules/vinext/dist/server/app-browser-entry.js?v=1d9373ba:608:24)
```

I did not import styled-jsx anywhere. It is installed as a dependency of nextjs:

```
next@16.1.6
└── styled-jsx@5.1.6
```

The contents of `node_modules/styled-jsx/style.js` is:
`module.exports = require('./dist/index').style`

I also tried enabling Vite's legacy.inconsistentCjsInterop option in vite.config.ts, but the same error occurs.

I'm not sure whether this is a vinext issue, Vite module interop issue, or an interaction with Next.js's styled-jsx dependency, but when I run npm run dev:vinext, the application renders for a second then throws the stack trace.

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure with `npx vinext check`, `npx vinext init`, and `npm run dev:vinext` using the listed Next.js, vinext, Vite, and styled-jsx versions. Inspect `node_modules/styled-jsx/style.js` and `vite.config.ts`, then trace the styled-jsx resolution; done means the dev server renders without the default-export error.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript, vite
Domain
tooling, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.