using webpack with ethers causes a "ReferenceError: fetch is not defined" error

I created a Typescript lambda function using serverless-bundle which uses webpack to efficiently bundle the typescript. One of my dependencies is ethers. In my function I try to fetch a block with provider.getBlock("latest"), and it fails with a missing response error. Digging a little deeper into the error reveals the true cause of the error

ReferenceError: fetch is not defined

I think when ethers gets bundled by webpack, it thinks it’s going to be used in a browser environment and emits the call to fetch, which doesn’t work when it’s run in a lambda function.

I saw the previous issue #1108, and tried adding mainFields: ["main"] to my webpack.config.js but it still errors out.

How do I coerce webpack to not cause the fetch function to be emitted in the bundled code?

Original GitHub issue in serverless-bundle https://github.com/AnomalyInnovations/serverless-bundle/issues/204

[pulasthibandara]

You can use the webpack ProvidePlugin to set the fetch global variable.

plugins: [
    new webpack.ProvidePlugin({
      WebSocket: 'ws',
      fetch: ['node-fetch', 'default'],
    }),
]

[mwawrusch]

import fetch from "node-fetch";
// tslint:disable-next-line:no-any
declare var global: any;
global.fetch = fetch;

solves this (taken from here: https://zauner.nllk.net/post/0024-node-fetch-webpack-typescript/)