capacitor: 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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 16 (4 by maintainers)

Most upvoted comments

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'.

+11

brilliantinsane on Sep 26, 2022

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?

jonesdhtx on Oct 17, 2022

This is most likely related to the http plugin failing to serialize the data being passed from web -> native. The team will be investigating a fix

See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

ItsChaceD on Sep 23, 2022

can’t reproduce on Capacitor 5.7.0, so it was probably fixed when https://github.com/ionic-team/capacitor/pull/6206 got merged as a comment pointed out

jcesarmobile on Feb 20, 2024

This will be probably solved when PR https://github.com/ionic-team/capacitor/pull/6206 is merged

gpetrov on Mar 3, 2023

Of note, a similar issue happens if you provider headers as a Headers object instead of a plain object. Regular fetch accepts this and I believe this should too. @KevinKelchen so it seems https://github.com/ionic-team/capacitor/issues/6132 and a Headers object both cause the DataCloneError issue.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Headers

silviogutierrez on Dec 16, 2022