cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Back again with another edition of 'How we use Dropbox', so find out how Emma uses to-do lists to get it all done here!

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

TypeError: e.clone is not a function

TypeError: e.clone is not a function

RomainMazB
Explorer | Level 3

Hi All!

I'm working on a VueJS App with Axios library.

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: 

TypeError: e.clone is not a function

Here is my Vue App code to generate the access token:

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);
}

Access token always returns undefined and console says TypeError: e.clone is not a function

 

An idea?

1 Accepted Solution

Accepted Solutions

Re: TypeError: e.clone is not a function

Greg-DB
Dropboxer

Thanks, I better understand the issue now.

I see that you're passing in axios as your fetch library, and the failure is occurring in the 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.

As far as I can tell, axios does not officially conform to the fetch standard (I don't see any reference to it on the axios page), so I don't think we can consider this officially supported. I'll pass this along as a feature request for support for axios, but I can't promise if or when that might be implemented. 

Instead, I recommend passing in some HTTP client that supports the fetch standard, such as isomorphic-fetch, like in the example here.

View solution in original post

4 Replies 4

Re: TypeError: e.clone is not a function

Greg-DB
Dropboxer

We don't have any specific support for vue.js in particular, but we'll be happy to try and take a look.

First, do you get a stack trace for this? What specific line is this failing in?

Re: TypeError: e.clone is not a function

RomainMazB
Explorer | Level 3

Hi, thanks for your time.

I don't think it's a Vue problem. I suppose it's an Axios configuration.

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.

The XHR success but in the callback of Dropbox instance, there is a clone function, which fails

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&grant_type=authorization_code&redirect_uri=http://localhost/fanny/public/&client_id=myAppID&client_secret=myAppSecret".

Directly from the Dropbox.js:

  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}&\
grant_type=authorization_code&redirect_uri=${redirectUri}&\
client_id=${clientId}&client_secret=${clientSecret}`;

    const fetchOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    };

    return this.fetch(path, fetchOptions)
      .then(res => parseBodyToType(res)) // !!!! It fails here! !!!!
      .then(([res, data]) => {
        // 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;
      });
  }

parseBodyToType 

function parseBodyToType(res) {
  const clone = res.clone();
  return new Promise((resolve) => {
    res.json()
      .then(data => resolve(data))
      .catch(() => clone.text().then(data => resolve(data)));
  }).then(data => [res, data]);
}

 

Re: TypeError: e.clone is not a function

Greg-DB
Dropboxer

Thanks, I better understand the issue now.

I see that you're passing in axios as your fetch library, and the failure is occurring in the 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.

As far as I can tell, axios does not officially conform to the fetch standard (I don't see any reference to it on the axios page), so I don't think we can consider this officially supported. I'll pass this along as a feature request for support for axios, but I can't promise if or when that might be implemented. 

Instead, I recommend passing in some HTTP client that supports the fetch standard, such as isomorphic-fetch, like in the example here.

View solution in original post

Re: TypeError: e.clone is not a function

RomainMazB
Explorer | Level 3

Hi.

Thanks for the suggestion...

After many hours trying to configure Axios to pass this issue, I was  about to change the fetch library for this project...

Poll
We love to learn from the educators who use Dropbox. Whether you teach kids, teens, adults or a combination of all three, we want to know what apps and integrations you use with Dropbox to help with teaching. Which of the ones below is your favorite, or most used tool?
Who's talking

Top contributors to this post

  • User avatar
    RomainMazB Explorer | Level 3
  • User avatar
    Greg-DB Dropboxer
What do Dropbox user levels mean?
Need more support?