expo-web-browser: Another WebBrowser is already being presented -> dismissBrowser is not working

Summary

I’m getting an error by using openBrowserAsync -> Another WebBrowser is already being presented and when I tried to dismiss it via dismissBrowser I’m getting an unhandled crash.

Invariant Violation: No callback found with cbID 31232 and callID 15616 for  NativeUnimoduleProxy.callMethod - most likely the callback was already invoked. Args: '[{"type":"dismiss"}]'
- node_modules/expo/build/logs/LogSerialization.js:160:14 in _captureConsoleStackTrace
- node_modules/expo/build/logs/LogSerialization.js:41:26 in serializeLogDataAsync
- ... 9 more stack frames from framework internals

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

40.0.0

Environment

Expo CLI 4.0.17 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.0 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
      Android SDK:
        API Levels: 23, 26, 28, 29, 30
        Build Tools: 28.0.3, 29.0.2, 30.0.2
        System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.6953283
      Xcode: 12.2/12B45b - /usr/bin/xcodebuild
    npmPackages:
      expo: ~40.0.0 => 40.0.0 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

     try {
        let result = await WebBrowser.openBrowserAsync(touchpoint?.attributes?.apply_url);
      } catch (error) {
        if (error.code == "WebBrowser" && Platform.OS == 'ios') {
          WebBrowser.dismissBrowser();
        }
      }

[Almaju]

In my case, this happened because of unsupported characters in the URL (accents for example). Doing this fixed it:

await WebBrowser.openBrowserAsync(encodeURI(url));

[RikusWiehahn]

Try double-checking the URL. I got this error when I had an incorrect template string for the destination url:

const res = await WebBrowser.openBrowserAsync(`$${url}`);

Once I removed the extra $ it worked fine 🙂