Is there a way to remove "TypeError: Expected signal to be an instanceof AbortSignal"?

[1c7]

https://github.com/node-fetch/node-fetch/blob/master/src/request.js?ts=2#L120

This line causing problem

Let's check out ths isAbortSignal function

When would it happen?

After Webpack bundle my code, code minification would change the name,
object[NAME] === 'AbortSignal' is not true anymore
so this error would pop up,
The only solution is to turn off code minification
There should be a better way than this

Propose (What to do next)

1. Delete this part altogether, don't check the name
2. Don't compare with string 'AbortSignal' like this object[NAME] === 'AbortSignal',
   in Ruby we have class.name to get the class name, I am not sure what's the equivalent in JS

Maybe this StackOverflow question helpful: How to get a JavaScript object's class?

Thanks

[1c7]

I can not provide reproducible code for now. sorry.

How I encounter this problem?

I am building a Electron.js app that can upload file to Azure Storage.
Using "@azure/storage-blob": "12.1.1"
Everything works fine in development, but after I bundle the code for production,

This TypeError: Expected signal to be an instanceof AbortSignal would popup.
After tracking it, I found out it's node-fetch rasing this error

[1c7]

I hope this problem can be fixed,
Because I want to turn on code minify for my electron.js main process code.
For now, I have to turn it off
(File size 898kb -> 2.3mb)

[Richienb]

Using Symbol.toStringTag was supposed to prevent this specific problem.

[1c7]

@Richienb Thank you for helping, so should I send a PR or? What's the next step?

[Richienb]

@1c7 PRs are welcome to fix this issue.

[1c7]

@Richienb
Even though just changing this one line,
I have to run all the test and make sure not to break other things,
and understand how other pieces works
it's still quite complicated,
Would you mind helping me fix this?
Or let other core members who are familiar with these codes to fix it?

Really appreciate that, Thanks!

Thanks for building node-fetch, helpful lib!

[1c7]

Done, fixed it

Enviroment

• Electron.js 8.0.0
• "vue-cli-plugin-electron-builder": "^1.4.5"
• "@azure/storage-blob": "12.1.1"

Solution：

This can still minify code,
but, without mangle with the class name and function name

vue.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
 pluginOptions: {
  electronBuilder: {
   chainWebpackMainProcess: config => {
    config.plugins.delete('uglify')
    config.plugin('uglify').use(TerserPlugin, [{
     terserOptions: {
      mangle: false,
      sourceMap: true,
      compress: false,
      keep_classnames: true,
      keep_fnames: true,
      output: {
       comments: false,
      },
     }
    }])
    config.optimization.minimize(false);
    console.log(config.toString())
   },
  }
 },
}

Result (This worked)

This is src/background.js file after running npm run electron:build

For comparison (This doesn't work)

node-fetch would raise error

[RuurdBijlsma]

I couldn't get the TerserPlugin to work, so I fixed it another way, maybe someone else has a use for this as well. I wrapped the abort signal in the following class: https://gist.github.com/RuurdBijlsma/66e31f47c1e2f2c14b4652b43f65a8fc

So instead of passing abortController.signal to node-fetch or a googleapis request, I would pass new AbortSignal(abortController.signal), the main thing here is static get name() which returns the proper name even when minimization is fully enabled

[UrielCh]

RuurdBijlsma sugarcode looks nice, but, can not be use in a typescript project:
The Typescript transpiler refused to overwrite the name getter with the Error:

Static property 'name' conflicts with built-in property 'Function.name' of constructor function 'AbortSignal'.ts(2699)

Setting keep_classnames: true in the TerserPlugin works, but this change is applied to all classnames, I do not see any option in the TerserPlugin to provide a set of classname to keep untouched.

#1001 fix the issue, but only on NodeJS v15+

[turansky]

WA, which save single name AbortSignal

// keep_classnames is required to workaround node-fetch Expected signal to be an instanceof AbortSignal
config.optimization = {
  minimizer: [
    new TerserPlugin({
      cache: true,
      parallel: true,
      sourceMap: true, // Must be set to true if using source-maps in production
      terserOptions: {
        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        mangle: false,
        sourceMap: true,
        // compress: false,
        keep_classnames: /AbortSignal/,
        keep_fnames: /AbortSignal/,
        output: {
          beautify: true,
          indent_level: 1
        }
      }
    }),
  ],
};

Source

[domgenv]

For those using esbuild, an equivalent solution to 1c7's solution is to set the "keepNames" option to true.

https://esbuild.github.io/api/#keep-names

[raulfdm]

I came up to this problem (using Esbuild) and fixed that by making the package that uses node-fetch (in my case @sanity/client) as external resource or in other words, excluding the package from the bundling itself:

// build.js

// ...
const baseConfig = {
  external: ['@sanity/client', /* ... other external dependencies ... */]
}

I tried the suggestion from @domgenv to set keepNames to true but unfortunately it didn't work.

[Gbr22]

#784 (comment) How could I achieve this with nuxtjs?

[joshkel]

A bit more information, in case anyone is curious: As mentioned in #784 (comment), current versions of node-fetch use Symbol.toStringTag, so they should work just fine, even after minification. node-fetch 2.x (the most recent pre-ESM version, and the version used by, e.g., @azure/storage-blob 12.12.0) still checks against name, so it's affected by this (and can be fixed by adding one of the keep-names options).

[yantze]

Node.js 16.x internal AbortController can use in node-fetch 2.x.

[vlinder]

For reference, when using terser with @swc/core this is the minimal config to fix this issue in your webpack config. It does not appear to support regexes for keep_classnames nor keep_fnames

    optimization: {
      minimizer: [
        new TerserPlugin({
          minify: TerserPlugin.swcMinify,
          terserOptions: {
            mangle: {
              // older versions of node-fetch requires AbortSignal to be untouched.
              // https://github.com/node-fetch/node-fetch/issues/784
              reserved: ['AbortSignal'],
            },
          },
        }),
      ]
    },

[dimaboychev]

FYI if anyone stumbles on this. I get this error in nextjs 14 application with "@azure/storage-blob": "^12.17.0":
"Blob Upload Error TypeError: Expected signal to be an instanceof AbortSignal".

To bypass the error you can disable server minification via next.config.js file like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverMinification: false
  }
}

module.exports = nextConfig

[shinebayar-g]

If anyone is using https://github.com/actions/toolkit/tree/main/packages/artifact v2 with esbuild and facing this issue, using --keep-names (https://esbuild.github.io/api/#keep-names) flag seems to be fixing the issue. Thanks to the above linked issue.