You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
How do I resolve a 'ReferenceError: document is not defined at document.querySelector'?
I am working through the Dropbox Api tutorial on scrimba (https://scrimba.com/playlist/pnyeEhr) and (
https://scrimba.com/g/gdropbox). I am on the Render Files section. After coding the updateFiles method I am getting a ReferenceError. This may be because I had to change the top lines of code from:
/*import { Dropbox } from 'dropbox';
const accessToken = 'myToken';
const dbx = new Dropbox({
accessToken,
fetch
});
to:
require('es6-promise').polyfill();
require('isomorphic-fetch');
var _dropbox = require("dropbox");
const accessToken = '<my access token>';
const dbx = new _dropbox.Dropbox({
accessToken: accessToken,
fetch: fetchU
});
----------------------------------
My index.js code is:
'use strict';
require('es6-promise').polyfill();
require('isomorphic-fetch');
var _dropbox = require("dropbox");
const accessToken = 'my Token';
const dbx = new _dropbox.Dropbox({
accessToken: accessToken,
fetch: fetch
});
//const fileListElem = document.getElementById('.js-file-list')
const fileListElem = document.querySelector('.js-file-list');
const state = {
files: []
}
const init = () => {
dbx.filesListFolder({
path: ''
}).then(res => {
updateFiles(res.entries)
})
}
const updateFiles = files => {
state.files = [...state.files, ...files]
renderFiles()
}
const renderFiles = () => {
fileListElem.innerHTML = state.files.sort((a,b) => {
// sort alphabetically folders first
if ((a['tag'] === 'folder' || b['.tag'] === 'folder') && !(a['.tag'] === b['.tag']))
{
return a['.tag'] === 'folder' ? -1 : 1
} else {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
}
}
).map(file => {
const type = file['.tag']
return `
<li class="dbx-list-item ${type}">${file.name}</li>
`
} )
}
init()
If you just want to use the tutorial's code, even if you want to change it around, I recommend using the Scrimba page itself, as it has the environment all set up for you. You can even change the code and run the app again right there.
They have the JavaScript written in index.js, and apparently use webpack to package it before loading it into the browser using using a standard script tag in this line in index.html:
<script src="index.pack.js"></script>
- Greg-DB
Dropbox Staff
Based on your use of 'require', it sounds like you're trying to run this in Node.js. Is that correct?
If so, that would explain the 'document is not defined' error you're seeing, as Node does not offer a 'document' object. The guide was written to run in a browser JavaScript environment, where 'document' is defined natively.
- Yes, you must be right. I am using VSCode. And running it with Live Server. I couldn't get it to work otherwise. I must be not running it correctly. Can you give me a hi t on how to run it in the browser as you said? Thanks!
- Greg-DB
If you just want to use the tutorial's code, even if you want to change it around, I recommend using the Scrimba page itself, as it has the environment all set up for you. You can even change the code and run the app again right there.
They have the JavaScript written in index.js, and apparently use webpack to package it before loading it into the browser using using a standard script tag in this line in index.html:
<script src="index.pack.js"></script>
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
