Node.js+HTML项目报错ReferenceError: document is not defined求解决

Hey there, I totally get how frustrating it is to get stuck on an error for hours—let's break this down and fix it together!

What's Causing the Error? #

The document object is a browser-only API—it's part of the DOM (Document Object Model) that browsers use to interact with web pages. Node.js runs on the server side, where there's no browser environment, so it doesn't recognize document at all. That's exactly why you're seeing ReferenceError: document is not defined when you start your project.

Looking at your code, you've written DOM-manipulation functions and exported them using CommonJS (module.exports), which is Node.js's default module system. If you're trying to run this code directly in Node.js, or require it in a Node.js script, it will fail immediately because document doesn't exist there.

Solutions Based on Your Use Case #

1. If This Code Is Meant for the Browser

If these functions are supposed to run on the client side (in the user's browser), you need to adjust how you export them so browsers can understand them:

• Option A: Attach to the window object (simple, no build tools needed):

  // Remove module.exports and attach functions to window
  window.getElement = id => document.getElementById(id);
  window.setVisible = (el, state) => {
    let element = el;
    if (typeof el === 'string') {
      element = getElement(el);
    }
    element.style.display = state ? 'block' : 'none';
  };
  window.setRowVisible = (row, state) => {
    row.style.display = state ? 'block' : 'none';
  };
  

  Then include this script in your HTML like this:

  <script src="your-file-name.js"></script>
  

• Option B: Use ES Modules (cleaner, modern approach):

  // Replace module.exports with ES module syntax
  export const getElement = id => document.getElementById(id);
  export const setVisible = (el, state) => {
    let element = el;
    if (typeof el === 'string') {
      element = getElement(el);
    }
    element.style.display = state ? 'block' : 'none';
  };
  export const setRowVisible = (row, state) => {
    row.style.display = state ? 'block' : 'none';
  };
  

  Then include it in your HTML with the type="module" attribute:

  <script type="module" src="your-file-name.js"></script>
  

2. If You Need to Run This Code in Node.js (e.g., SSR, Web Scraping)

If you have a reason to run DOM-related code in Node.js (like server-side rendering or scraping), you can use the jsdom library to simulate a browser-like DOM environment:

1. First install jsdom:

   npm install jsdom
   

2. Modify your code to create a simulated DOM:

   const { JSDOM } = require('jsdom');
   // Create a mock HTML document to simulate the browser environment
   const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
   const document = dom.window.document;
   
   // Your existing functions will now work with this simulated document
   const getElement = id => document.getElementById(id);
   const setVisible = (el, state) => {
     let element = el;
     if (typeof el === 'string') {
       element = getElement(el);
     }
     element.style.display = state ? 'block' : 'none';
   };
   const setRowVisible = (row, state) => {
     row.style.display = state ? 'block' : 'none';
   };
   
   module.exports = { getElement, setVisible, setRowVisible, document };
   

Quick Recap #

The key issue is that document doesn't exist in Node.js. Choose the solution that matches where your code needs to run: browser-side adjustments or a simulated DOM for Node.js.

内容的提问来源于stack exchange，提问作者Vincent Tng