"You're importing a component that needs next/headers." for unreachable code

[jeengbe]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.18
      pnpm: 7.32.3
    Relevant packages:
      next: 13.4.3-canary.0
      eslint-config-next: 13.4.2
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), SWC transpilation

Link to the code that reproduces this issue

https://github.com/jeengbe/nextjs-next-headers-issue

To Reproduce

1. Start Next.js with pnpm dev
2. Go to http://localhost
3. Observe error
4. git checkout HEAD~1
5. Repeat step 1-2
6. Observe no error

Describe the Bug

Expected Behavior

Because of how the Environment component works (./environment/amphibious.tsx), it is only possible to reach the file that includes next/headers on the server:

export const Environment = () => {
  if (typeof window === "undefined") {
    return require("./server").getEnvironment();
  }

  return getClientEnvironment();
};

This is also understood by webpack, so the server code never makes it into the client bundle:

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
  /* harmony export */ Environment: function () {
    return /* binding */ Environment;
  },
  /* harmony export */
});
/* harmony import */ var _client__WEBPACK_IMPORTED_MODULE_0__ =
  __webpack_require__(/*! ./client */ "(app-client)/./environment/client.ts");

const Environment = () => {
  if (false) {
  }
  return (0, _client__WEBPACK_IMPORTED_MODULE_0__.getEnvironment)();
};
_c = Environment;
// ...

Note that if(typeof window === "undefined") { ... } was replaced with if (false) { }.

---

Since webpack's dead branch elimination is smart enough to eliminate this code, it should be legal to dynamically require modules that import next/headers from Client Components as long as we know that the code is only reachable though branches webpack considers dead. I can't exactly find how webpack does this, but the greater dead branch parity SWC gets with webpack, the better.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[nicitaacom]

I expiriencing similar issue with supabase - https://github.com/orgs/supabase/discussions/18086 Its more to supabase related - not to next js

[lightrow]

any updates on how to solve this? I have to use require('next/headers').headers() as a replacement for now, but im not sure if by doing that im sending the entire next/headers bundle to the client or not

[nicitaacom]

any updates on how to solve this? I have to use require('next/headers').headers() as a replacement for now, but im not sure if by doing that im sending the entire next/headers bundle to the client or not

Please try to research first (I mean updates alrady exist) https://github.com/vercel/next.js/issues/56630#issuecomment-1755473286

[marioatbahasa]

This is super annoying. Basically I need to have two API handlers because I want to get cookies on the server, and on the client.

I did the same workaround using require('next/headers').cookies() but it just seems so janky. Please fix this!

[christopher-caldwell]

Adding an additional scenario. This happened to me when using the cookies function outside of the app/ directory.

You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/

I am using the app directory as opposed to pages, but this call was in a directory features/. So I tried the "require" above, worked fine.

It was really odd that it was telling me it's not supported in the pages/ directory, when I wasn't using pages/. I did a minor refactor, calling the same exact code inside of the app/ directory and it worked perfectly fine.

I assume there is some sort of check to see if you are using it in the actual app/ directory.

[ezeamin]

Adding an additional scenario. This happened to me when using the cookies function outside of the app/ directory.

You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/

I am using the app directory as opposed to pages, but this call was in a directory features/. So I tried the "require" above, worked fine.

It was really odd that it was telling me it's not supported in the pages/ directory, when I wasn't using pages/. I did a minor refactor, calling the same exact code inside of the app/ directory and it worked perfectly fine.

I assume there is some sort of check to see if you are using it in the actual app/ directory.

Hi @christopher-caldwell, I'm having the exact same situation as you. Hopefully someone from the team reaches out soon.

[christopher-caldwell]

@ezeamin Here is my work around for now:

// A file at some path outside of the `app/` dir
const SomeComponent = async (props) => {
  const { cookies } = await import('next/headers')
  const cookieManager = cookies()

  return (
    <div>
      {cookieManager.get('cookieName')?.value ?? 'Nope'}
    </div>
  )
}

[nicitaacom]

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {
  if (typeof document === "undefined") return

  const value = "; " + document.cookie
  const decodedValue = decodeURIComponent(value)
  const parts = decodedValue.split("; " + name + "=")

  if (parts.length === 2) {
    return parts.pop()?.split(";").shift()
  }
}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

[christopher-caldwell]

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {

  if (typeof document === "undefined") return

  const value = "; " + document.cookie

  const decodedValue = decodeURIComponent(value)

  const parts = decodedValue.split("; " + name + "=")

  if (parts.length === 2) {

    return parts.pop()?.split(";").shift()

  }

}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

[nicitaacom]

Guys I don't understand what's the problem to use This solution in client components to get cookies

export function getCookie(name: string) {

  if (typeof document === "undefined") return

  const value = "; " + document.cookie

  const decodedValue = decodeURIComponent(value)

  const parts = decodedValue.split("; " + name + "=")

  if (parts.length === 2) {

    return parts.pop()?.split(";").shift()

  }

}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

Of course because you try to get cookies outside of app You need to set cookies to some component related to some route or component in app folder Otherwise you may pass it trhough props into some component

I don't understand use case of using cookie.get() from next/headers outside app directory

[christopher-caldwell]

Guys I don't understand what's the problem to use

This solution in client components to get cookies

export function getCookie(name: string) {

  if (typeof document === "undefined") return

  const value = "; " + document.cookie

  const decodedValue = decodeURIComponent(value)

  const parts = decodedValue.split("; " + name + "=")

  if (parts.length === 2) {

    return parts.pop()?.split(";").shift()

  }

}

And this solution in server components to get cookies

import { cookies } from "next/headers"

cookie.get('someCookieName').value

For me, the issue is not how to access cookies. It's that doing so outside of the actual app/ directory (while still using the app router) throws an error.

Of course because you try to get cookies outside of app

You need to set cookies to some component related to some route or component in app folder

Otherwise you may pass it trhough props into some component

I don't understand use case of using cookie.get() from next/headers outside app directory

Using app router, and having files outside of the actual app directory are 2 different things. You can use the cookies function anywhere, but there is (I believe) incorrect check on where you're accessing them. My basis for this is because the error message says that it's not supported in the pages router. Also it works if you require it, or import it in the component.

Your feature code does not need to be in the app directory to use the app router.

[Qodestackr]

'use client';

I tracked and fouund having to use use client in my layout.tsx file.

// import { usePathname } from 'next/navigation';
'use client';

import DashboardHeader from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar";
import type { Metadata } from "next";
import { SidebarOne } from '@/components/admin-panel/sidebar';

import { redirect } from 'next/navigation';
import { getAuth } from '@/app/features/auth/queries/get-auth'; // Lucia*

So, I went for files around the feature and removed things like useRouter for Link tags where necessary. Got fixed.

[nicitaacom]

'use client';

I tracked and fouund having to use use client in my layout.tsx file.

// import { usePathname } from 'next/navigation';
'use client';

import DashboardHeader from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar";
import type { Metadata } from "next";
import { SidebarOne } from '@/components/admin-panel/sidebar';

import { redirect } from 'next/navigation';
import { getAuth } from '@/app/features/auth/queries/get-auth'; // Lucia*

So, I went for files around the fe ature and removed things like useRouter for Link tags where necessary. Got fixed.

Nice fix by killing SSR feature of Next.js

[tiagobnobrega]

In my case, I'm using Nx monorepo, and all cookie-related code lives under the same library. The issue is that this library exports a single 'barrel' file, which exports both client and server code. One of these files imports the next/headers, and even if it's an unreachable code on client components I get the error too.

Right now, I'm also using the const { cookies } = await import('next/headers') workaround. But it's not ideal.

[foodornt]

Same as tiago here, using a turbo monorepo and splitting auth into its own package, gonna follow the same approach everyone else is using until it's fixed 🤲🤲

[ArianHamdi]

I'm experiencing the same issue. I have a request.ts file that is used by both the client and the server. I only need to read next/headers on the server, but if I import next/headers at the top level of the module, it throws an error, even though I only call it when typeof window === 'undefined'.

[jm-alan]

I've encountered this issue when using cookies inside of a middleware - as it's required that middleware be placed outside of the app directory, it's currently impossible to use anything from next/headers inside of one.

[FrancMihani]

@ezeamin Here is my work around for now:

// A file at some path outside of the `app/` dir
const SomeComponent = async (props) => {
  const { cookies } = await import('next/headers')
  const cookieManager = cookies()

  return (
    <div>
      {cookieManager.get('cookieName')?.value ?? 'Nope'}
    </div>
  )
}

this gives error in production if used outside pages

   Generating static pages (62/63)  [    ]Error: redacted
    at /path/.next/server/chunks/8356.js:19:12770
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: '2976706782'

[mobeigi]

In my case I had a util outside of app directory doing some cookie parsing. I don't understand why it has to be within app directory. The error message is also outdated, the reasoning behind it might be outdated also.

[dfiedlerx]

Now with next15 the require('next/headers') approach will not always work because we need to add an await. For example in my code below:

onst isMobileDevice = (): boolean => {
  const userAgent =
    typeof window !== 'undefined' && window
      ? window.navigator.userAgent
      : // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
        require('next/headers').headers().get('user-agent')

  return /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
    userAgent
  )
}

Does anyone have a way to get around this next/header import problem, but still maintain asynchronicity?

[kitchanismo]

add "use server" on top of your actions with next/headers imports