EnvScript works on client but not server #144

badtant · 2024-06-27T05:26:04Z

Hi,

I'm currently exploring this lib (3.2.2) with next (14.2.4).
Testing it in the app router I get undefined for my env on the server but it works on the client. This throws an hydration error...

Here is my code:

layout.tsx

import React from 'react';
import { EnvScript } from 'next-runtime-env';
import { unstable_noStore as noStore } from 'next/cache';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    noStore();

    return (
        <html lang="sv" className="no-js">
            <head>
                <EnvScript
                    env={{
                        NEXT_PUBLIC_FOO: 'VAL_NEXT_PUBLIC_FOO',
                    }}
                />
            </head>
            <body>{children}</body>
        </html>
    );
}

component on test route:

'use client';

import React from 'react';
import { env } from 'next-runtime-env';

const Foo = () => {
    const fooPublic = env('NEXT_PUBLIC_FOO');
    console.log('fooPublic', fooPublic);

    return <h1>{fooPublic}</h1>;
};

export default Foo;

The text was updated successfully, but these errors were encountered:

JSONRice · 2024-09-19T18:40:47Z

You're only working with a client component not server side.

badtant · 2024-09-19T20:48:31Z

Doesn't use client mean run both on the server and on the client?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EnvScript works on client but not server #144

EnvScript works on client but not server #144

badtant commented Jun 27, 2024 •

edited

Loading

JSONRice commented Sep 19, 2024

badtant commented Sep 19, 2024

EnvScript works on client but not server #144

EnvScript works on client but not server #144

Comments

badtant commented Jun 27, 2024 • edited Loading

JSONRice commented Sep 19, 2024

badtant commented Sep 19, 2024

badtant commented Jun 27, 2024 •

edited

Loading