bug: Capacitor 4.3 Http/Cookies: Unhandled Promise Rejection: DataCloneError: The object can not be cloned.

Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/android: 4.3.0
  @capacitor/ios: 4.3.0

Installed Dependencies:

  @capacitor/cli: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/ios: 4.3.0
  @capacitor/android: 4.3.0

Platform(s)

iOS & Android

Current Behavior

When using Capacitor Http/Cookies on a local build, Mapbox will not load its content anymore. However, this works fine when using the website, or using Capacitor and pointing to the server where the App is hosted on. So it is most likely not related to the implementation.

Possibly this is related to cookies.

Image link: https://user-images.githubusercontent.com/89409894/191803876-cd037583-7a31-4566-b31d-c7a373651b25.png

Code

import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import * as mapboxgl from '!mapbox-gl';

export default function SearchResults(...props) {

let map;

let geocoder = new MapboxGeocoder({
accessToken: "MYKEY",
types: 'place',
countries: 'de',
language: 'de-DE',
placeholder: 'Neue Suche starten',
limit: 5
});

React.useEffect(() => {

  // Load MapBox API

  map = new mapboxgl.Map({
    accessToken: "MYTOKEN",
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    attributionControl: false,
    center: [13.381777, 52.531677],
    zoom: 8
  });

  geocoder.addTo("#geocoder")

  geocoder.on('result', (e) => {
    const result = e.result
    map.setCenter({ lng: result.geometry.coordinates[0], lat: result.geometry.coordinates[1] })
    getUsersByPlace(result)
  });

  window.scrollTo(0, 0);

}, []);

}

Current Behavior

The error must not be thrown and Mapbox must load.

[brilliantinsane]

I’m getting the same error when trying to upload a file (FormData).

Example:

const options = {
    url: 'https://example.com/my/api',
    headers: { 'X-Fake-Header': 'Fake-Value' },
    data: FormData,
  };
 
await CapacitorHttp.post(options);

I get the same error even if I set content type header like so: 'Content-Type': 'multipart/form-data'.

[jonesdhtx]

I’m getting the same error when trying to upload a file (FormData).

Example:

const options = {
    url: 'https://example.com/my/api',
    headers: { 'X-Fake-Header': 'Fake-Value' },
    data: FormData,
  };
 
await CapacitorHttp.post(options);

I get the same error even if I set content type header like so: 'Content-Type': 'multipart/form-data'.

I’m having the same issue… Did you figure out a work-around for this?