ReferenceError: fetch is not defined

[d3]

ReferenceError: fetch is not defined

[stevage]

It's probably worth documenting how to make this work. I had to fiddle a bit, but this worked after npm install node-fetch-polyfill:

if (typeof fetch !== 'function') {
    global.fetch = require('node-fetch-polyfill');
}
const csv = require('d3-fetch').csv;

[mbostock]

You need an environment that supports the Fetch API, such as a a web browser. Node does not currently support Fetch, though it may in the future. If you want to load this library in an environment that does not natively support Fetch you will need to load your own polyfill such as node-fetch.

[jomasim]

You need to install jsdom using yarn or npm.
Node.js does not support dom by default, thus the need to use jsdom for creating dom elements. Use d3 for all other manipulations except fetch operations. i.e d3.xml,d3.tsv

import jsdom from 'jsdom';
import * as d3 from 'd3';
const { JSDOM } = jsdom;
JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
    const states = d3
      .select(doc)
      .select('path')
      .attr(':fme:ID');
    console.log(states);
  });

creating dom from file

JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
}

dom from html string

const dom = new JSDOM(
  `<p>Hello
    <img src="foo.jpg">
  </p>`,
  { includeNodeLocations: true }
);

[linglp]

if (typeof fetch !== 'function') {
global.fetch = require('node-fetch-polyfill');
}

I have the following code after doing npm install node-fetch-polyfill

import express from 'express'
import cors from 'cors'
import { csv } from 'd3-fetch'

const app = express();

if (typeof fetch !== 'function') {
    global.fetch = require('node-fetch-polyfill');
}

But when I used the csv function, I still got ReferenceError: fetch is not defined error

Here's the code that works for me in the end:
I did npm install node-fetch, and then the following:

import express from 'express'
import cors from 'cors'
import { csv } from 'd3-fetch'

const app = express();
import fetch, {
    Blob,
    blobFrom,
    blobFromSync,
    File,
    fileFrom,
    fileFromSync,
    FormData,
    Headers,
    Request,
    Response,
} from 'node-fetch'

if (!globalThis.fetch) {
    globalThis.fetch = fetch
    globalThis.Headers = Headers
    globalThis.Request = Request
    globalThis.Response = Response
}