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

[itaru2622]

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

[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?

[itaru2622]

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]

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

[itaru2622]

@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]

@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]

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.