Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Turbopack error on edge runtime(middleware): Error [TypeError]: _react.default.createContext is not a function #66162

Closed
chungweileong94 opened this issue May 24, 2024 · 12 comments · Fixed by #66175
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.

Comments

@chungweileong94
Copy link
Contributor

Link to the code that reproduces this issue

https://github.com/chungweileong94/turbopack-edge-error-bug

To Reproduce

  1. Start the app
  2. Open the app in the browser

Current vs. Expected behavior

Expected:

  • Turbopack should be able to build the code without any issue

Current:

  • Turbopack throw Error [TypeError]: _react.default.createContext is not a function

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.15.7
Relevant Packages:
  next: 14.3.0-canary.80 // Latest available version is detected (14.3.0-canary.80).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I'm not exactly sure which part of the codebase is causing the issue. However, I either removed the middleware, or removed everything related to next-auth from the middleware, and everything works fine again.

Note that the code works fine without Turbopack, and it used to work with Turbopack in the previous nextjs version.

@chungweileong94 chungweileong94 added the bug Issue was opened via the bug report template. label May 24, 2024
@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label May 24, 2024
@kyb3r

This comment has been minimized.

@fernandojbf
Copy link

In my project, the issue appears with Webpack using next-intl

@timneutkens timneutkens added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label May 24, 2024
timneutkens added a commit that referenced this issue May 24, 2024
## What?

Ensures that `next/navigation` and React is aliased in middleware in the
same way that it's aliased in Route Handlers. This matches the behavior
we have in Next.js with webpack.

Fixes #66162

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
@fernandojbf
Copy link

@timneutkens using webpack, i continue to see the same issue:

image

@OlegLustenko
Copy link

the same issue

image

@timneutkens
Copy link
Member

Please open a new issue with a reproduction. It's expected that createContext is not available in middleware / route handlers, they're bundled in the same way as server components nowadays to ensure that things like client-only / server-only work correctly.

@jeslenbucci
Copy link

This just began happening to me as well after upgrading to next@15 RC and adding middleware. I am not creating a context within the middleware. My context is in a client component with 'use client' at the top of the file. Everything was working fine, and still does, unless I add middleware.ts to the root of my src/ directory.

@jeslenbucci
Copy link

For me, it appears this is an issue with AuthJS v5. If I remove authJS and throw in the middleware example found in the next docs (see below), the createContext is not a function log no longer appears.

My middleware without AuthJS (no error)

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/sign-in', request.url))
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: [
    '/dashboard/',
    '/account/:path*',
    '/dashboard/:path*',
    '/memberships/:path*',
    '/api/v2/:path*',
  ],
}

My middlewar with AuthJS (error)

export { auth as middleware } from '~/server/auth'

// See "Matching Paths" below to learn more
export const config = {
  matcher: [
    '/dashboard/',
    '/account/:path*',
    '/dashboard/:path*',
    '/memberships/:path*',
    '/api/v2/:path*',
  ],
}

@fernandojbf
Copy link

fernandojbf commented May 28, 2024

Please open a new issue with a reproduction. It's expected that createContext is not available in middleware / route handlers, they're bundled in the same way as server components nowadays to ensure that things like client-only / server-only work correctly.

I can observe that i was using a dependency on the middleware that was using react context. removing that dependency made it working again Thanks

@liuhuapiaoyuan
Copy link

How to solve it in the end?

@kyb3r
Copy link

kyb3r commented May 29, 2024

my issue is with authjs v5 as well, any workaround?

@chungweileong94
Copy link
Contributor Author

chungweileong94 commented May 29, 2024

@liuhuapiaoyuan @kyb3r The latest canary version should resolved this. Fixed in https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.81 to be specific.

@timneutkens
Copy link
Member

As said above: please open a new issue with a reproduction.

Then we can have a look 🙂

@vercel vercel locked as off-topic and limited conversation to collaborators May 29, 2024
ForsakenHarmony pushed a commit that referenced this issue Aug 14, 2024
## What?

Ensures that `next/navigation` and React is aliased in middleware in the
same way that it's aliased in Route Handlers. This matches the behavior
we have in Next.js with webpack.

Fixes #66162

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
ForsakenHarmony pushed a commit that referenced this issue Aug 15, 2024
Ensures that `next/navigation` and React is aliased in middleware in the
same way that it's aliased in Route Handlers. This matches the behavior
we have in Next.js with webpack.

Fixes #66162

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
ForsakenHarmony pushed a commit that referenced this issue Aug 16, 2024
Ensures that `next/navigation` and React is aliased in middleware in the
same way that it's aliased in Route Handlers. This matches the behavior
we have in Next.js with webpack.

Fixes #66162

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants