Window is not defined in node.js, sigma.js and typescript environment

All we need is an easy explanation of the problem, so here it is.

I try to setup a sigma.js project with node.js written in TypeScript. The following reference error occurs after starting the node.js server with:

ts-node index.ts

The error seems to occur directly within the sigma\utils\index.js.

<nodejsproject>\node_modules\sigma\utils\index.js:125
    if (typeof window.devicePixelRatio !== "undefined")
    ^
ReferenceError: window is not defined
    at getPixelRatio (<nodejsproject>\node_modules\sigma\utils\index.js:125:5)
    at Object.<anonymous> (<nodejsproject>\node_modules\sigma\sigma.js:52:45)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (<nodejsproject>\node_modules\sigma\index.js:14:31)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

I tried to setup the typescript configuration as follows:

package.json

{
  ...
  "main": "index.ts",
  "scripts": {
    "dev": "nodemon ./index.ts",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node index.ts"
  },
  "dependencies": {
    "@types/sigmajs": "^1.0.28",
    "express": "^4.17.2",
    "fs": "^0.0.1-security",
    "graphology": "^0.23.2",
    "graphology-components": "^1.5.2",
    "graphology-layout": "^0.5.0",
    "graphology-layout-forceatlas2": "^0.8.1",
    "papaparse": "^5.3.1",
    "path": "^0.12.7",
    "sigma": "^2.1.3",
    "xhr": "^2.6.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "tslint": "^6.1.3",
    "typescript": "^4.5.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "lib": ["dom"]
  },
  "lib": [
    "es2015"
  ],
  "exclude":[
    "./node_modules"
  ]
}

The error is raised after instantiation of Sigma to draw the graph:

router.get('/', (request, response) => {
    
    response.sendFile(path.join(__dirname+'/views/index.html'));
    
    const file = fs.createReadStream(fileLocation);
    
    //Metadata were loaded and parsed
    Papa.parse<{ original_table: string; referenced_table: string }>(file, {
      download: true,
      header: true,
      delimiter: ';',
      complete: (results) => {
        const graph: Graph = new Graph();
            
        //Build the node with their entities as nodes
        results.data.forEach((line) => {

        /* process loaded data to create the graph */

        //Draw the graph within the browser
        const container = document.getElementById("network-container") as HTMLElement;
        
        new Sigma(graph, container); //error occurs right here
      },
    });
});

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Well, no, it isn’t.

Express.js is a server-side framework for generating responses to HTTP requests. It runs on Node.js. It doesn’t have a window.

Sigma is a graphing library designed to be run by a web browser when it is embedded in a webpage (via a <script> element). It works by manipulating the DOM of that webpage.

It isn’t compatible with Node.js or Express.js.


The existence of a package on NPM shouldn’t be taken to mean that a module is compatible with Node.js. Many modules there are designed to be used in web browsers by applications which use NPM to manage their dependencies. (These are typically applications written using a SPA framework like React, Angular or Vue which bundle the modules they depend on using tools like Webpack or Parcel).

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply