Webpack- module not found even after npm install

Question

I am trying to use node-fetch in my nodejs code to fetch from an API. When I try to build using webpack, the console shows me the errors like these below:

ERROR in ./node_modules/node-fetch/src/request.js
Module not found: Error: Can't resolve 'node:url' in 'C:\Users\Administrator\FluidAgentSamples\apps\dice-roller\node_modules\node-fetch\src'
 @ ./node_modules/node-fetch/src/request.js 10:0-45 141:9-18
 @ ./node_modules/node-fetch/src/index.js
 @ ./src/utils/agent-utils.js
 @ ./src/app.js

and

ERROR in ./node_modules/formdata-polyfill/esm.min.js 17:0
Module parse failed: Unexpected character '#' (17:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this 
file. See https://webpack.js.org/concepts#loaders
| /** @type {typeof globalThis.FormData} */
| export const FormData = class FormData {
> #d=[];
| constructor(...a){if(a.length)throw new TypeError(`Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.`)}
| get [t]() {return 'FormData'}
 @ ./node_modules/node-fetch/src/body.js 12:0-70 53:29-37 55:10-24 112:24-32 323:21-29
 @ ./node_modules/node-fetch/src/index.js
 @ ./src/utils/agent-utils.js
 @ ./src/app.js

Below is my webpack config:

const path = require('path');

module.exports = env => {
    
    const mode = env && env.prod
        ? "production"
        : "development";

    return {
        devtool: "inline-source-map",
        entry: {
            app: "./src/app.js",
        },
        resolve: {
            extensions: ['.js'] // add your other extensions here
          },
        mode,
        output: {
            filename: "appcode_bundle.js",
            path: path.resolve(__dirname, './dist')
        },
        target : "node"
    };
};

Here is me using fetch API, I did not change it from the earlier version which was running on browser instead of node and using Http fetch (could this be the issuse?).

import fetch from "node-fetch";
...
...
if (settings.useHostedEnv) {
        response = await fetch("http://5x.1xx.9x.1xx:6778/startFluidAgent", {
            method: "POST",
            cache: "no-cache",
            mode: "cors",
            headers: {
                    "Content-Type": "application/json",
            },
            body: JSON.stringify(fluidAgentContext),
        });
    }

Any ideas on how to resolve? I am a newbie to js so I could have missed something stupid.

Answer 1

Resolved this issue by using

npm install node-fetch@2

node-fetch from v3, which I was previously using, is an ESM-only module.