We are aware of the issue with the badge emails resending to everyone, we apologise for the inconvenience - learn more here.
Forum Discussion
tadpole
6 years agoExplorer | Level 4
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-DBDropbox 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.
- tadpoleExplorer | Level 4Yes, 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-DBDropbox Staff
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.
5,876 PostsLatest Activity: 59 minutes agoIf you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!