Uncaught TypeError: Dropbox.Dropbox is not a constructor

[skezh1]

Hi! This error reappeared again!

[Greg-DB]

@skezh1 Thanks for the report. The thread you originally posted in was old, so I've moved this to a new thread.

There hasn't been a new release of the Dropbox JavaScript SDK recently, and I'm not seeing this issue in my own testing now.

I'll be happy to help with any issues you're having with the Dropbox API/SDK, but I'll need some more information. Please reply with:

• the name and version number of the platform and SDK/library you are using
• the steps to reproduce the issue, including relevant code snippet(s), but don't include any access or refresh token(s)
• the full text of any error or unexpected output

[skezh1]

Hi Greg and thank you for replying so quickly!

I've built a web app that had been up for a few years and I did not make any recent updates there, but it started to fail today with the "TypeError: Dropbox.Dropbox is not a constructor" error on the "new Dropbox.Dropbox({accessToken: *** })" (Credentials replaced) line.

I've tried updating the SDK version to the latest (10.34.0 now, and I'm using an older version) - this did not fix the issue. SDK version 5.1.0 that did fix this issue last time - also did not help.

Confused, I went to tutorials, and was able to successfully call dropbox from my app with the "basic" example (https://github.com/dropbox/dropbox-sdk-js/tree/main/examples/javascript/basic) , but I could not find the problem still on why this started to happen. I tried to move the line to the global namespace like in the example - this also did not help.

Eventually, I figured that replacing "new Dropbox.Dropbox" with just "new Dropbox" resolved the issue for me - all the functions were there. I've added a try-catch to try both options for now so that my app will continue working.

If I find what the issue was - I will update!

Thank you!

[skezh1]

Found the way to reproduce and the issue!

So, the problem happens if the following library is included after Dropbox-sdk.min.js:

https://www.dropbox.com/static/api/2/dropins.js

Please see example here! https://jsfiddle.net/y9dm8oew/

Run it and open the console to see the error.

[Здравко]

Hi @skezh1,

Yes, of course, it's obvious. Both scripts share the same namespace and put there the same name - the last wins. 🙋 That's where your issue is coming from.

By the way you're not using neither Embedder, Saver, or something like... hy at all you need the second script? 🧐 Just to make your life difficult? 😁

A workaround can be seen here if by any chance you need both scripts. 😉

Good luck.

[skezh1]

Thank you!

[skezh1]

I'm using the Saver in my app. The above was just a minimal sniplet to reproduce the issue.

Question remaining is why now this started to happen?

Did the dropin library had changes to it that started to overwrite the Dropbox class instead of extending it, and if so - was the change intended and probably documentation should be updated, or is it a bug?

[Здравко]

To be honest, I'm not aware of some recent change. Both scripts share the same name all the time, as far as I know. So when put on the same place one of them will overwrite the other always - the last wins, as I said!

Maybe you have something changed in your page: different namespaces merge, order os scripts load change, move from static to dynamic build of Saver, etc. Could be one or more of the things. You can best figure out what happened.

[PeachBug]

We are facing the same issue in our company, both Dropbox.Dropbox and Dropbox.embed is undefined, but Dropbox and embed are available on window
I tried the workaround, but then Dropbox.embed errors out with the following message:

Error: appKey must be provided
at o.e (dropins.js:1:24651)
at new o (dropins.js:1:31456)
at Dropbox.embed (dropins.js:1:36121)

 
the only thing that could have changed is the dropins.js file, as we serve our own copy of Dropbox-sdk.min.js from cdnjs.

Edit: got it to work, had to piece together the Dropbox object

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.34.0/Dropbox-sdk.min.js"></script>
<script>
   const dropbox = Dropbox;
</script>
<script id="dropboxjs" type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" data-app-key="..."></script>
<script>
   Dropbox = { Dropbox, ...dropbox }
</script>

[Здравко]

@PeachBug, I don't know if your issue is the same or how similar it is, but as seems for some reason you have forgot the application key (that should be placed setup with data-app-key attribute). Just fix it. You can check what's there right now as dump (log or render) of Dropbox.appKey.