CODEWITHSUNDEEP
node.jsoutputvisual-studio-codevscode-extensions
Dany
Dany

Reputation: 41

ReferenceError: document is not defined only in Vscode editor

This error does not goes away! and it shows only in the VScode output console, I run the code in google chrome and the error is gone.

ReferenceError: document is not defined

Example: https://codepen.io/Dany2020/pen/vYLWPox

`[Running] node "c:\\index.js"
var headerText = document.getElementById("header");
                   ^
    ReferenceError: document is not defined
      at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
[Done] exited with code=1 in 0.132 seconds`

Upvotes: 1

Views: 13360

Answers (3)

Riyaz Shaikh
Riyaz Shaikh

Reputation: 1

Just add a defer in the script tag like this <script defer src="/script.js"></script> What it will do is that it will make the Browser parse(download) the HTML document and javascript document together and the code will not be executed until both docs are ready, As document object is not understood by vs-code .js file will be bundled together with HTML and will go directly to the browser which understands what document object is.

Upvotes: 0

Draxy07
Draxy07

Reputation: 91

This error usually comes around when using vs-code because vs-code doesn't understand the document object as it is not part of the node's inbuilt libraries but when on the browser it will work because the browser understands the document object as it is defined in its libraries.

the document object l refers to is the HTML code bundled together into a single file for a compilation that is what is referred to as the document object in javascript. e.g. index.html is referred to as the document object from the index.js the entire index.html file will be the document object

Upvotes: -1

David
David

Reputation: 219037

I run the code in google chrome and the error is gone.

The difference here is the environments in which you're running the code. Web browsers and Node.js may both use JavaScript as a language, but they are very different contexts in which to run code. You're trying to run the code in Node.js:

[Running] node "c:\\index.js"

And indeed in Node.js there is no default document object. There is in browsers, because in the context of a browser you're viewing a document (a web page). But in the context of Node.js you aren't. Which also means that the line of code you're using doesn't really make sense in Node.js:

var headerText = document.getElementById("header");

Without the presence of a web page, what document are you viewing? What element are you trying to get? None of those things exist there.

It sounds like the code you're writing is meant to be executed as in-browser JavaScript on a web page. So that's where you should be running it. The code would go in a <script> element (or be in a separate file referenced by a <script> element) in that web page's HTML. If the Node process is your server, only perform the server-side logic there. The web page returned by the server would have this code you're referencing in the question.

Upvotes: 6

Related Questions