Issue with Serverless and/or webpack

[leads]

Hi all.
Trying to use node-fetch inside a Serverless project. Using Webpack as well in order to allow to me ES6 for imports.

The moment I import node-fetch (v3.1.0) I get the following errors when I run serverless offline:

ERROR in ./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:http' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/index.js 9:0-29 52:58-62
 @ ./scripts/handler/Handler.js

More errors

ERROR in ./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:http' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/index.js 9:0-29 52:58-62
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/headers.js
Module not found: Error: Can't resolve 'node:http' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/headers.js 8:0-29 10:34-38 11:1-5 20:35-39 21:1-5
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:https' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/index.js 10:0-31 52:50-55
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:stream' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/index.js 12:0-66 59:47-53 178:83-89 215:14-18 215:34-45 260:11-15 270:16-20 270:36-47 273:41-45 273:84-88 283:11-15
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/body.js
Module not found: Error: Can't resolve 'node:stream' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/body.js 8:0-48 51:29-35 66:12-18 68:12-18 80:22-28 208:23-29 267:22-28 269:11-22 270:11-22 333:21-27
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/request.js
Module not found: Error: Can't resolve 'node:url' in '/path/to/my/project/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
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/body.js
Module not found: Error: Can't resolve 'node:util' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/body.js 9:0-43 45:13-18 170:24-33 281:35-44 319:30-35
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/headers.js
Module not found: Error: Can't resolve 'node:util' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/headers.js 7:0-32 60:42-47 76:35-40
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:zlib' in '/path/to/my/project/node_modules/node-fetch/src'
 @ ./node_modules/node-fetch/src/index.js 11:0-29 254:11-15 255:17-21 260:22-26 273:52-56 273:95-99 283:22-26
 @ ./scripts/handler/Handler.js

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
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/fetch-blob/index.js 48:2
Module parse failed: Unexpected character '#' (48:2)
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
| const _Blob = class Blob {
|   /** @type {Array.<(Blob|Uint8Array)>} */
>   #parts = []
|   #type = ''
|   #size = 0
 @ ./node_modules/node-fetch/src/body.js 11:0-30 135:13-17
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in ./node_modules/fetch-blob/from.js 64:2
Module parse failed: Unexpected character '#' (64:2)
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
|  */
| class BlobDataItem {
>   #path
|   #start
| 
 @ ./node_modules/node-fetch/src/utils/multipart-parser.js 1:0-40 367:19-23
 @ ./node_modules/node-fetch/src/body.js
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

ERROR in chunk scripts/handler/Handler [entry]
scripts/handler/Handler.js
/path/to/my/project/node_modules/node-fetch/src/index.js 84f67deb9631c8bc607a2970877e5a52
Unexpected token (271:11)
|       if ((body instanceof !(function webpackMissingModule() { var e = new Error("Cannot find module 'node:stream'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())) && (typeof body.getBoundary !== 'function')) {
|               // Tee instance body
|               p1 = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'node:stream'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())({highWaterMark});
|               p2 = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'node:stream'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())({highWaterMark});
|               body.pipe(p1);

There are no errors when I import any other services or files. Having import fetch from 'node-fetch'; as the top line of the Serverless handler throws the error.

Here is my webpack file as well in case that's causing the issue

const slsw = require('serverless-webpack');
const webpack = require('webpack')
const path = require('path')

const logDirectory = process.env.LOG_DIRECTORY ? process.env.LOG_DIRECTORY : process.env.ENV === 'development' ? path.resolve(__dirname, 'log') : null
const logLevel = process.env.LOG_LEVEL ? process.env.LOG_LEVEL : 'warn'
console.log('ENVIORNMENT IS: ' + process.env.ENV)

module.exports = {
    target: 'node',
    entry: slsw.lib.entries,
    devtool: 'eval-source-map',
    output: {
        libraryTarget: 'commonjs',
        path: path.resolve(__dirname, '.webpack'),
        filename: '[name].js'
    },
    mode: 'production',
    resolve: {
        alias: {
            '-': path.resolve(__dirname, 'src')
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: ['source-map-support', 'transform-runtime']
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env.ENV": JSON.stringify(process.env.ENV),
            "process.env.LOG_LEVEL": JSON.stringify(logLevel),
            "process.env.LOG_DIRECTORY": JSON.stringify(logDirectory)
        })
    ]
}

Node version 14. Happy to provide anything else if I've missed something here.

Thank you, Tom

[LinusU]

Could this be related to #1367? What exact version of Node.js are you running? Are you running on AWS Lambda?

[leads]

Hi, sorry I hadn't seen that other issue. Looks like it's the same thing.
Locally I'm using node 14.17.0

I'm using Serverless to create the AWS Lambda and telling it to use Node 14 but not a specific version.
runtime: nodejs14.x

My issue was local by the way, I hadn't tried deploying it to AWS.

I have just tried node-fetch@3.0.0
and get a different error now:

ERROR in ./node_modules/fetch-blob/index.js 48:2
Module parse failed: Unexpected character '#' (48:2)
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
| const _Blob = class Blob {
|   /** @type {Array.<(Blob|Uint8Array)>} */
>   #parts = []
|   #type = ''
|   #size = 0
 @ ./node_modules/node-fetch/src/body.js 11:0-30 108:13-17
 @ ./node_modules/node-fetch/src/index.js
 @ ./scripts/handler/Handler.js

FWIW, in the end I used Axios and that's worked fine.

[LinusU]

AWS Lambda have upgraded to Node.js 14.18 which should solve that problem, I would recommend you doing the same locally to avoid running into it.

Regarding your other error, it seems like whatever bundler/transpiler you are using doesn't understand the private fields notation. This syntax is supported in Node.js 12, 14, and 16 natively which is why we are using it.

I would suggest upgrading WebPack and/or Babel in order to solve that ☺️