<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: TypeError: e.clone is not a function in Dropbox API Support &amp; Feedback</title>
    <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369808#M20862</link>
    <description>&lt;P&gt;Hi, thanks for your time.&lt;/P&gt;&lt;P&gt;I don't think it's a Vue problem. I suppose it's an Axios configuration.&lt;/P&gt;&lt;P&gt;For those who don't know Axios library, it parses JSON automatically all response/request data. I think there is the problem (not sure) but don't know how to fix it.&lt;/P&gt;&lt;P&gt;The XHR success but in the callback of Dropbox instance, there is a clone function, which fails&lt;/P&gt;&lt;PRE&gt;TypeError: e.clone is not a function
    at app.js:43042
    at app.js:43042
app.js:34227 XHR finished loading: POST "https://api.dropboxapi.com/oauth2/token?code=2_ILSbfhKnAAAAAAAAAAnF7twcUKrhL6CAKY29ZL-iY&amp;amp;grant_type=authorization_code&amp;amp;redirect_uri=http://localhost/fanny/public/&amp;amp;client_id=myAppID&amp;amp;client_secret=myAppSecret".&lt;/PRE&gt;&lt;P&gt;Directly from the &lt;A href="https://github.com/dropbox/dropbox-sdk-js/blob/master/src/dropbox-base.js#L231" target="_self"&gt;Dropbox.js&lt;/A&gt;:&lt;/P&gt;&lt;PRE&gt;  getAccessTokenFromCode(redirectUri, code) {
    const clientId = this.getClientId();
    const clientSecret = this.getClientSecret();

    if (!clientId) {
      throw new Error('A client id is required. You can set the client id using .setClientId().');
    }
    if (!clientSecret) {
      throw new Error('A client secret is required. You can set the client id using .setClientSecret().');
    }
    const path = `https://api.dropboxapi.com/oauth2/token?code=${code}&amp;amp;\
grant_type=authorization_code&amp;amp;redirect_uri=${redirectUri}&amp;amp;\
client_id=${clientId}&amp;amp;client_secret=${clientSecret}`;

    const fetchOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    };

    return this.fetch(path, fetchOptions)
      .then(res =&amp;gt; parseBodyToType(res)) // !!!! It fails here! !!!!
      .then(([res, data]) =&amp;gt; {
        // maintaining existing API for error codes not equal to 200 range
        if (!res.ok) {
          // eslint-disable-next-line no-throw-literal
          throw {
            error: data,
            response: res,
            status: res.status,
          };
        }
        return data.access_token;
      });
  }&lt;/PRE&gt;&lt;P&gt;&lt;A href="https://github.com/dropbox/dropbox-sdk-js/blob/master/src/dropbox-base.js#L113" target="_self"&gt;parseBodyToType&lt;/A&gt;&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;function parseBodyToType(res) {
  const clone = res.clone();
  return new Promise((resolve) =&amp;gt; {
    res.json()
      .then(data =&amp;gt; resolve(data))
      .catch(() =&amp;gt; clone.text().then(data =&amp;gt; resolve(data)));
  }).then(data =&amp;gt; [res, data]);
}&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
    <pubDate>Tue, 08 Oct 2019 10:45:23 GMT</pubDate>
    <dc:creator>RomainMazB</dc:creator>
    <dc:date>2019-10-08T10:45:23Z</dc:date>
    <item>
      <title>TypeError: e.clone is not a function</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369382#M20851</link>
      <description>&lt;P&gt;Hi All!&lt;/P&gt;
&lt;P&gt;I'm working on a VueJS App with Axios library.&lt;/P&gt;
&lt;P&gt;I just want to authorize my WebApp to access to my DropBox account with OAuth2 but I'm stuck at the beginning because it returns me:&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;TypeError: e.clone is not a function&lt;/PRE&gt;
&lt;P&gt;Here is my Vue App code to generate the access token:&lt;/P&gt;
&lt;PRE&gt;beforeCreate() {
    delete axios.defaults.headers.common['X-CSRF-TOKEN']; // Forced to use that with axios
    window.dbx = new this.$root.Dropbox({ // Create the Dropbox instance, works well
        fetch: axios,
        clientId: 'myClientID',
        clientSecret: 'myClientSecret'
    });
},
async created() {
    // Search for access token in local storage
    if(localStorage.dbx_token) this.dbx_token = localStorage.dbx_token;
    else {
        let params = new URL(window.location.href).searchParams, // Or currently asked
            code = params.get("code"),
            csrf_token = params.get("state");
        if (csrf_token == this.csrf_token) { // OAuth returns
            try { // Try to get an access token
                this.dbx_token = await dbx.getAccessTokenFromCode('http://localhost/fanny/public/', code);
            } catch(error) {
                console.log(error);
            }
        }
    }

    // If found, generate DBX API
    if(this.dbx_token) dbx.setAccessToken(this.dbx_token);
}&lt;/PRE&gt;
&lt;P&gt;Access token always returns undefined and console says&amp;nbsp;&lt;EM&gt;TypeError: e.clone is not a function&lt;/EM&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;An idea?&lt;/P&gt;</description>
      <pubDate>Mon, 07 Oct 2019 18:25:13 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369382#M20851</guid>
      <dc:creator>RomainMazB</dc:creator>
      <dc:date>2019-10-07T18:25:13Z</dc:date>
    </item>
    <item>
      <title>Re: TypeError: e.clone is not a function</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369599#M20855</link>
      <description>&lt;P&gt;We don't have any specific support for vue.js in particular, but we'll be happy to try and take a look.&lt;/P&gt;
&lt;P&gt;First, do you get a stack trace for this? What specific line is this failing in?&lt;/P&gt;</description>
      <pubDate>Mon, 07 Oct 2019 15:51:29 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369599#M20855</guid>
      <dc:creator>Greg-DB</dc:creator>
      <dc:date>2019-10-07T15:51:29Z</dc:date>
    </item>
    <item>
      <title>Re: TypeError: e.clone is not a function</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369808#M20862</link>
      <description>&lt;P&gt;Hi, thanks for your time.&lt;/P&gt;&lt;P&gt;I don't think it's a Vue problem. I suppose it's an Axios configuration.&lt;/P&gt;&lt;P&gt;For those who don't know Axios library, it parses JSON automatically all response/request data. I think there is the problem (not sure) but don't know how to fix it.&lt;/P&gt;&lt;P&gt;The XHR success but in the callback of Dropbox instance, there is a clone function, which fails&lt;/P&gt;&lt;PRE&gt;TypeError: e.clone is not a function
    at app.js:43042
    at app.js:43042
app.js:34227 XHR finished loading: POST "https://api.dropboxapi.com/oauth2/token?code=2_ILSbfhKnAAAAAAAAAAnF7twcUKrhL6CAKY29ZL-iY&amp;amp;grant_type=authorization_code&amp;amp;redirect_uri=http://localhost/fanny/public/&amp;amp;client_id=myAppID&amp;amp;client_secret=myAppSecret".&lt;/PRE&gt;&lt;P&gt;Directly from the &lt;A href="https://github.com/dropbox/dropbox-sdk-js/blob/master/src/dropbox-base.js#L231" target="_self"&gt;Dropbox.js&lt;/A&gt;:&lt;/P&gt;&lt;PRE&gt;  getAccessTokenFromCode(redirectUri, code) {
    const clientId = this.getClientId();
    const clientSecret = this.getClientSecret();

    if (!clientId) {
      throw new Error('A client id is required. You can set the client id using .setClientId().');
    }
    if (!clientSecret) {
      throw new Error('A client secret is required. You can set the client id using .setClientSecret().');
    }
    const path = `https://api.dropboxapi.com/oauth2/token?code=${code}&amp;amp;\
grant_type=authorization_code&amp;amp;redirect_uri=${redirectUri}&amp;amp;\
client_id=${clientId}&amp;amp;client_secret=${clientSecret}`;

    const fetchOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    };

    return this.fetch(path, fetchOptions)
      .then(res =&amp;gt; parseBodyToType(res)) // !!!! It fails here! !!!!
      .then(([res, data]) =&amp;gt; {
        // maintaining existing API for error codes not equal to 200 range
        if (!res.ok) {
          // eslint-disable-next-line no-throw-literal
          throw {
            error: data,
            response: res,
            status: res.status,
          };
        }
        return data.access_token;
      });
  }&lt;/PRE&gt;&lt;P&gt;&lt;A href="https://github.com/dropbox/dropbox-sdk-js/blob/master/src/dropbox-base.js#L113" target="_self"&gt;parseBodyToType&lt;/A&gt;&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;function parseBodyToType(res) {
  const clone = res.clone();
  return new Promise((resolve) =&amp;gt; {
    res.json()
      .then(data =&amp;gt; resolve(data))
      .catch(() =&amp;gt; clone.text().then(data =&amp;gt; resolve(data)));
  }).then(data =&amp;gt; [res, data]);
}&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Tue, 08 Oct 2019 10:45:23 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369808#M20862</guid>
      <dc:creator>RomainMazB</dc:creator>
      <dc:date>2019-10-08T10:45:23Z</dc:date>
    </item>
    <item>
      <title>Re: TypeError: e.clone is not a function</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369881#M20865</link>
      <description>&lt;P&gt;Thanks, I better understand the issue now.&lt;/P&gt;
&lt;P&gt;I see that you're passing in axios as your fetch library, and&amp;nbsp;the failure is&amp;nbsp;occurring in the&amp;nbsp;Dropbox JavaScript library when attempting to process the OAuth result. I've reproduced this by likewise passing in axios. I've also confirmed that actual API calls fail when using axios.&lt;/P&gt;
&lt;P&gt;As far as I can tell, axios does not officially conform to &lt;A href="https://fetch.spec.whatwg.org/" target="_self"&gt;the fetch standard&lt;/A&gt; (I don't see any reference to it on &lt;A href="https://github.com/axios/axios" target="_self"&gt;the axios page&lt;/A&gt;), so I don't think we can consider this officially supported. I'll pass this along as a feature request for support for axios,&amp;nbsp;but I can't promise if or when that might be implemented.&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Instead, I&amp;nbsp;recommend passing in some HTTP client that supports the fetch standard, such as&amp;nbsp;&lt;A href="https://www.npmjs.com/package/isomorphic-fetch" target="_self"&gt;isomorphic-fetch&lt;/A&gt;, like in &lt;A href="https://dropbox.github.io/dropbox-sdk-js/tutorial-JavaScript%20SDK.html" target="_self"&gt;the example here&lt;/A&gt;.&lt;/P&gt;</description>
      <pubDate>Tue, 08 Oct 2019 15:16:19 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/369881#M20865</guid>
      <dc:creator>Greg-DB</dc:creator>
      <dc:date>2019-10-08T15:16:19Z</dc:date>
    </item>
    <item>
      <title>Re: TypeError: e.clone is not a function</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/370124#M20880</link>
      <description>&lt;P&gt;Hi.&lt;/P&gt;&lt;P&gt;Thanks for the suggestion...&lt;/P&gt;&lt;P&gt;After many hours trying to configure Axios to pass this issue, I was&amp;nbsp; about to change the fetch library for this project...&lt;/P&gt;</description>
      <pubDate>Wed, 09 Oct 2019 14:15:59 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/TypeError-e-clone-is-not-a-function/m-p/370124#M20880</guid>
      <dc:creator>RomainMazB</dc:creator>
      <dc:date>2019-10-09T14:15:59Z</dc:date>
    </item>
  </channel>
</rss>

