Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch #181

itaru2622 · 2025-04-29T01:55:40Z

fix errors on @HofmannZ/feature/nextjs-15-compatibility branch

HofmannZ · 2025-04-29T06:49:48Z

Hi! Thanks for contributing. I noticed you’re not awaiting some promises, which could lead to race conditions. Could you take a look and fix that?

itaru2622 · 2025-04-29T11:16:35Z

Hi, @HofmannZ

I noticed you’re not awaiting some promises

I guess you meant my 2nd commit of this PR which removed async from function signature and removed await like below.

-export const PublicEnvScript: FC<PublicEnvScriptProps> = async ({ nonce }) => {
-  await connection(); // Opt into dynamic rendering
+export const PublicEnvScript: FC<PublicEnvScriptProps> =  ({ nonce }) => {
+  connection(); // Opt into dynamic rendering

before removing async from signature (just 1st commit ), I got lots of errors as cited in the end of this comment

when I checked current development branch, I found dev branch uses non async style function as below
so I tested the same style (add 2nd commit) then all CI errors were gone. that is the reason I added 2nd commit.
you can reproduce my experience by git checkout 2f40fa1 or e57b82c

next-runtime-env/src/script/public-env-script.tsx

Lines 29 to 35 in 536fc86

    
           export const PublicEnvScript: FC<PublicEnvScriptProps> = ({ 
        
             nonce, 
        
             disableNextScript, 
        
             nextScriptProps, 
        
           }) => { 
        
             noStore(); // Opt into dynamic rendering

with 2nd commit, It passed without errors

 PASS  src/utils/make-env-public.spec.ts
 PASS  src/helpers/get-public-env.spec.ts
 PASS  src/helpers/log.spec.ts
 PASS  src/script/env.spec.ts
 PASS  src/script/env-script.spec.tsx
 PASS  src/provider/use-env-context.spec.tsx
 PASS  src/provider/public-env-provider.spec.tsx
 PASS  src/provider/env-provider.spec.tsx
 PASS  src/script/public-env-script.spec.tsx
--------------------------|---------|----------|---------|---------|-------------------
File                      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------------|---------|----------|---------|---------|-------------------
All files                 |     100 |      100 |     100 |     100 |                   
 helpers                  |     100 |      100 |     100 |     100 |                   
  get-public-env.ts       |     100 |      100 |     100 |     100 |                   
  is-browser.ts           |     100 |      100 |     100 |     100 |                   
  log.ts                  |     100 |      100 |     100 |     100 |                   
 provider                 |     100 |      100 |     100 |     100 |                   
  env-context.ts          |     100 |      100 |     100 |     100 |                   
  env-provider.tsx        |     100 |      100 |     100 |     100 |                   
  public-env-provider.tsx |     100 |      100 |     100 |     100 |                   
  use-env-context.ts      |     100 |      100 |     100 |     100 |                   
 script                   |     100 |      100 |     100 |     100 |                   
  constants.ts            |     100 |      100 |     100 |     100 |                   
  env-script.tsx          |     100 |      100 |     100 |     100 |                   
  env.ts                  |     100 |      100 |     100 |     100 |                   
  public-env-script.tsx   |     100 |      100 |     100 |     100 |                   
 utils                    |     100 |      100 |     100 |     100 |                   
  make-env-public.ts      |     100 |      100 |     100 |     100 |                   
--------------------------|---------|----------|---------|---------|-------------------

Test Suites: 9 passed, 9 total
Tests:       1 todo, 36 passed, 37 total
Snapshots:   0 total
Time:        6.17 s
Ran all test suites.

without 2nd commit, lots of errors:

 
 FAIL  src/script/public-env-script.spec.tsx
  ● Console

    console.error
      async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

      24 |     };
      25 |
    > 26 |     render(<PublicEnvScript />);
         |           ^
      27 |
      28 |     expect(document.querySelector('script')?.textContent).toBe(
      29 |       `window['__ENV'] = {"NEXT_PUBLIC_FOO":"foo-value"}`,

      at renderWithHooks (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:5743:21)
      at updateFunctionComponent (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:8018:19)
      at beginWork (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:9683:18)
      at runWithFiberInDEV (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:543:16)
      at performUnitOfWork (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:15052:22)
      at workLoopSync (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:14870:41)
      at renderRootSync (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:14850:11)
      at performWorkOnRoot (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:14334:13)
      at performWorkOnRootViaSchedulerTask (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:15931:7)
      at flushActQueue (node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:862:34)
      at Object.<anonymous>.process.env.NODE_ENV.exports.act (node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:1151:10)
      at node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@type_387f15e77fa100a829cca1e997aa9186/node_modules/@testing-library/react/dist/act-compat.js:47:25
      at renderRoot (node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@type_387f15e77fa100a829cca1e997aa9186/node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@type_387f15e77fa100a829cca1e997aa9186/node_modules/@testing-library/react/dist/pure.js:271:10)
      at Object.<anonymous> (src/script/public-env-script.spec.tsx:26:11)

    console.error
      A suspended resource finished loading inside a test, but the event was not wrapped in act(...).
      
      When testing, code that resolves suspended data should be wrapped into act(...):
      
      act(() => {
        /* finish loading suspended data */
      });
      /* assert on the output */
      
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act

      at pingSuspendedRoot (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.development.js:15590:17)

    console.error
      A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:
      
      await act(() => ...)

      at node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:1157:23
      at invokeTheCallbackFunction (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26)
      at node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/browser/Window.js:554:9

and more errors...

Test Suites: 2 failed, 7 passed, 9 total
Tests:       8 failed, 1 todo, 28 passed, 37 total
Snapshots:   0 total
Time:        3.835 s
Ran all test suites.
 ELIFECYCLE  Test failed. See above for more details.

itaru2622 · 2025-04-29T11:57:13Z

@HofmannZ if you prefer, I can push without 2nd commit. but note that it still have CI errors..

refer to https://github.com/jsdom/jsdom/issues 1724#issuecomment-720727999

itaru2622 · 2025-04-30T06:38:09Z

@HofmannZ I finally succeeded to build next-runtime-env with next15+react19 and push re-based version of my branch.

1st commit fixes ReferenceError on jest, NEW 2nd commit fixes other errors on build phase.
These two commits are mandatory.

3rd commit fixes the above commented errors (async and act matters ) as first aid.
as you commented before, there may be another approach but it may need to deep dive into new next15 + react19 world and hard to find solutions right now because of just released in 6 month ago.

itaru2622 · 2025-07-05T10:38:12Z

@HofmannZ

Hi! Thanks for contributing. I noticed you’re not awaiting some promises, which could lead to race conditions. Could you take a look and fix that?

The reason I needs to remove asyn/await words from some codes is:
we cannot use async in client side page (i.e src/script/public-env-*.tsx used by <script> in client side) as shown in the above error message, like below. so I fixed the bug.

FAIL  src/script/public-env-script.spec.tsx
async/await is not yet supported in Client Components

I had tested the code of this PR and worked with my software as expected, even without async/await.

anyway, what's the process needed for getting this PR merged?

anderso · 2025-07-05T11:26:01Z

FWIW: I have been using this branch for a week or so in our test environment and haven't seen any issues. But i did need to bump the peerDependencies to 15/19 also.

set321go · 2025-10-24T09:32:04Z

Any updates on this? nextjs 14 LTS ends in a couple of days

carl0s-sa · 2025-10-27T11:49:24Z

As of yesterday NextJS 14 is out of LTS. Is there any plans to merge this or release it as a separate package?

itaru2622 · 2025-10-27T12:22:30Z

unfortunately, I dont have time to maintain this branch as separate package.

If maintainer of this repo cannot merge nor release, I want somebody to maintain...

itaru2622 force-pushed the fix-nextjs-15-compatibility branch 2 times, most recently from 0a73ff2 to e57b82c Compare April 29, 2025 02:04

itaru2622 mentioned this pull request Apr 29, 2025

feat: ✨ use connection api for opting in to dynamic rendering #164

Draft

itaru2622 added 3 commits April 30, 2025 14:58

fix: ReferenceError on jest

962ba6b

refer to https://github.com/jsdom/jsdom/issues 1724#issuecomment-720727999

fix: tsconfig.json to get succeeded on build

ca31cb8

fix: src regarding async call, because error detected on test with jest

2e7869d

itaru2622 force-pushed the fix-nextjs-15-compatibility branch from e57b82c to 2e7869d Compare April 30, 2025 06:11

itaru2622 changed the title ~~Fix CI errors on @HofmannZ/feature/nextjs-15-compatibility branch~~ Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch Apr 30, 2025

itaru2622 closed this Apr 30, 2025

itaru2622 reopened this Apr 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch #181

Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch #181

Uh oh!

itaru2622 commented Apr 29, 2025 •

edited

Loading

Uh oh!

HofmannZ commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 30, 2025 •

edited

Loading

Uh oh!

itaru2622 commented Jul 5, 2025

Uh oh!

anderso commented Jul 5, 2025

Uh oh!

set321go commented Oct 24, 2025

Uh oh!

carl0s-sa commented Oct 27, 2025

Uh oh!

itaru2622 commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch #181

Are you sure you want to change the base?

Fix errors on @HofmannZ/feature/nextjs-15-compatibility branch #181

Uh oh!

Conversation

itaru2622 commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HofmannZ commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 29, 2025

Uh oh!

itaru2622 commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itaru2622 commented Jul 5, 2025

Uh oh!

anderso commented Jul 5, 2025

Uh oh!

set321go commented Oct 24, 2025

Uh oh!

carl0s-sa commented Oct 27, 2025

Uh oh!

itaru2622 commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

itaru2622 commented Apr 29, 2025 •

edited

Loading

itaru2622 commented Apr 30, 2025 •

edited

Loading