cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Update: Find information on Dropbox support during COVID-19 here
Close

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: 
Highlighted

TypeError: e.clone is not a function

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
Highlighted

Re: TypeError: e.clone is not a function

Dropboxer
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
Highlighted

Re: TypeError: e.clone is not a function

Dropboxer
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?

Highlighted

Re: TypeError: e.clone is not a function

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

 

Highlighted

Re: TypeError: e.clone is not a function

Dropboxer
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

Highlighted

Re: TypeError: e.clone is not a function

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

Polls
Do you know how to organize your files and folders?
We have created a guide on folder best practice, so you can get organized now check it out here.

Work Smarter with Dropbox

The way we work is changing. Share and discover new ways to work smarter with Dropbox in our community.

Sound good? Let's get started.
Who's talking

Top contributors to this post

What do Dropbox user levels mean?
Need more support?