How do I resolve a 'ReferenceError: document is not defined at document.querySelector'?

[tadpole]

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()

[Greg-DB]

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]

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 · Accepted solution]

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>