Environment Variables Not Loading in Next.js 15, React 19, Turbopack #75586

10000leaves · 2025-02-03T05:16:12Z

10000leaves
Feb 3, 2025

Summary

In a project using Next.js 15.1.3, React 19.0.0, and Turbopack, environment variables from the .env.local file with the NEXT_PUBLIC_ prefix are not being loaded on the client side. They load correctly on the server side but return undefined on the client side.

Additional information

Environment

Next.js: 15.1.3
React: 19.0.0
Turbopack: Enabled

Environment Variables: Set in .env.local file

// .env.local
NEXT_PUBLIC_AWS_USER_POOLS_CLIENT_ID=XXX
NEXT_PUBLIC_AWS_USER_POOLS_ID=XXX

Code Example

// /src/app/layout.tsx
'use client';

import './globals.css';
import MainLayout from '@/components/layout/MainLayout';
import { useEffect } from 'react';
import { Buffer } from 'buffer';
import * as process from 'process';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import { I18n } from '@aws-amplify/core';
import { translations } from '@aws-amplify/ui';
import { Authenticator } from '@aws-amplify/ui-react';
import { BIZ_UDPGothic } from 'next/font/google';

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolClientId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_CLIENT_ID || '',
      userPoolId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_ID || '',
    },
  },
});

I18n.putVocabularies(translations);
I18n.setLanguage('ja');

const udpgothic = BIZ_UDPGothic({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({ children }) {
  useEffect(() => {
    window.process = process;
    window.Buffer = Buffer;
  }, []);

  return (
    <html lang="jp" className="h-full">
      <head>
        <meta name="description" content="app description" />
        <title>app</title>
      </head>
      <body className={`h-full bg-gray-200 ${udpgothic.className}`}>
        <Authenticator loginMechanisms={['email']} variation="modal">
          <MainLayout>{children}</MainLayout>
        </Authenticator>
      </body>
    </html>
  );
}

Steps Taken

Verified environment variable settings and removed optional chaining.

userPoolClientId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_CLIENT_ID || '',
userPoolId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_ID || '',

Used console.log(process.env) for debugging, which returned an empty object on the client side.

Additional Information

Environment variables load correctly when not using Turbopack.
Development server is started with next dev --turbopack.

Question

Any advice on resolving this issue or additional steps to try would be greatly appreciated.

rahabonyani · 2025-02-11T14:52:12Z

rahabonyani
Feb 11, 2025

I have the same problem.
In a project using Next.js 15.1.4, React 19.0.0, and Turbopack, environment variables defined in the .env file with the NEXT_PUBLIC_ prefix are correctly loaded on the server side but return undefined on the client side.

0 replies

umersiddiqui17 · 2025-04-09T07:50:27Z

umersiddiqui17
Apr 9, 2025

it is not just the turbopack, without it i am facing this issue

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Environment Variables Not Loading in Next.js 15, React 19, Turbopack #75586

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Environment Variables Not Loading in Next.js 15, React 19, Turbopack #75586

Uh oh!

Uh oh!

10000leaves Feb 3, 2025

Summary

Additional information

Environment

Code Example

Steps Taken

Additional Information

Question

Replies: 2 comments

Uh oh!

rahabonyani Feb 11, 2025

Uh oh!

umersiddiqui17 Apr 9, 2025

10000leaves
Feb 3, 2025

rahabonyani
Feb 11, 2025

umersiddiqui17
Apr 9, 2025