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.

Sign up for GitHub

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

Jump to bottom

Window [__ENV] not being set in Header Script - Next 14.2.3 #145

Open
KieranTH opened this issue Jul 1, 2024 · 3 comments
Open

Window [__ENV] not being set in Header Script - Next 14.2.3 #145

KieranTH opened this issue Jul 1, 2024 · 3 comments

Comments

@KieranTH
Copy link

KieranTH commented Jul 1, 2024

Issue

I recently discovered an issue with my Next Env Variables, where it seems only SSR Components are able to access runtime variables.

After some debugging, it seems although the issue is coming from the <Script/> component from Next.

        <Script id={"test"} strategy={"beforeInteractive"} dangerouslySetInnerHTML={{__html: `console.log('test', window); window['__ENV'] = 'test'; console.log(window);`}}/>

The above code will fail due to the beforeInteractive strategy. If it's set to afterInteractive the window will be updated as expected.

It seems although beforeInteractive causes the script to not run at all in the client.

Anyone else ever encountered a similar issue?
@jimmyzzxhlh
Copy link

Not 100% sure if it is related, but I'm getting a warning in the console like the following. My environment variables are injected into client side components correctly though.
I'm using Next 14.2.5, next-runtime-env 3.2.2.

app-index.js:33 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"window['__ENV'] = {\\\"NEXT_PUBLIC_APP_ENVIRONMENT\\\":\\\"production\\\"}\"}])" Client: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"window['__ENV'] = {}\"}])"
    at script
    at Script (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/script.js:180:13)
    at EnvScript (webpack-internal:///(app-pages-browser)/./node_modules/next-runtime-env/build/script/env-script.js:23:22)
    at PublicEnvScript (webpack-internal:///(app-pages-browser)/./node_modules/next-runtime-env/build/script/public-env-script.js:22:28)
    at head

@blz-ea
Copy link

blz-ea commented Jul 27, 2024

Not 100% sure if it is related, but I'm getting a warning in the console like the following. My environment variables are injected into client side components correctly though. I'm using Next 14.2.5, next-runtime-env 3.2.2.

app-index.js:33 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"window['__ENV'] = {\\\"NEXT_PUBLIC_APP_ENVIRONMENT\\\":\\\"production\\\"}\"}])" Client: "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"window['__ENV'] = {}\"}])"
    at script
    at Script (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/script.js:180:13)
    at EnvScript (webpack-internal:///(app-pages-browser)/./node_modules/next-runtime-env/build/script/env-script.js:23:22)
    at PublicEnvScript (webpack-internal:///(app-pages-browser)/./node_modules/next-runtime-env/build/script/public-env-script.js:22:28)
    at head

@jimmyzzxhlh I think this is because of usage NEXT_PUBLIC_* environment variable.
I stumbled upon this as well. Warning disappears if environment variable does not contain that prefix.

@Unsleeping Unsleeping mentioned this issue Sep 20, 2024
Open
@Unsleeping
Copy link

@KieranTH Hi! Since my PR #150 hasn't received a response, I've published my fork on npm.

You can switch to awesome-next-runtime-env and be sure to configure the strategy prop for the assignment in your Root Layout:

<head>
   <PublicEnvScript strategy="afterInteractive" />
 </head>

For more information about the issue, check out: vercel/next.js#69567 (comment)
Forked version: #150

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jimmyzzxhlh @blz-ea @KieranTH @Unsleeping