We are aware of the issue with the badge emails resending to everyone, we apologise for the inconvenience - learn more here.

Forum Discussion

tadpole's avatar
tadpole
Explorer | Level 4
6 years ago

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's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox 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.

    • tadpole's avatar
      tadpole
      Explorer | Level 4
      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's avatar
        Greg-DB
        Icon for Dropbox Staff rankDropbox 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

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,876 PostsLatest Activity: 59 minutes ago
325 Following

If 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!