In Next.js App Router environment, the bridge works intermittently after the build process.

[doyoonkim12345]

I'm submitting an issue after a long time.

The bridge works intermittently in a Next.js 14 app router environment.
It works properly on iOS, but not on Android.

I'm not sure about the exact cause.

I'm attaching a reproduction repository and example video.
Reproduction repository

webview-bridge.webm

[gronxb]

On the initial run, initialBridges is not mocked and works fine, but when HMR runs, does initialBridges get mocked?

If so, this issue would only occur in the development environment and not in production.

[doyoonkim12345]

initialBridges works well in both development and production environments, and after the initial build, actual method calls work without problems. Separately, after building in the production environment, actual methods and mocked methods execute randomly

[nvu]

Environment: Next.js 15 + Android
Similarly, I'm using in nextjs15 app router environment.
I randomly encounter a situation where method is set as undefined on web side.
It looks like a timing issue, btw any suggestions on what to look into?

What's interesting in my case is that when it happens, the isWebViewBridgeAvailable is false.

So this is my temporary workaround code.

const { isWebViewBridgeAvailable } = useBridgeStatus();
useEffect(() => {
 if (!isWebViewBridgeAvailable) {
location.reload(); // bridgeStatus will be available after reload
 }
}, [isWebViewBridgeAvailable]);

which, as you can see, is undesirable.

[nvu]

I found better workaround. just use useBridgeLoose() for safety.

  const increase = useBridgeStore(state => state.increase);
  const { loose } = useBridgeLoose();
  ...
  loose.increase();

btw, I wonder if this is related with nextjs' context handling.
Cause when refer store in the main component,

const store = useBridgeStore(store => store)
console.log(store)

functions are remains inside the store.

But, refer store in a inner function,

const store = useBridgeStore(store => store);
console.log(store); // I can see functions
const handleStore = () => {
 console.log(store); // No functions
}
<Button onClick={handleStore}>...</Button>

the store's functions is removed and just values are remained.

[gronxb]

The WebView created by createWebView injects the available methods using injectJavascript, but it seems that the injection occasionally fails in the Next.js environment. Since useBridgeLoose ignores the available methods, it might work.

[gronxb]

To fundamentally solve the issue, we should investigate why injectJavascript is being ignored.