TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation

[DonikaV]

export const sendSuggestion = ((data: any): Promise<any> => {
  console.log(JSON.stringify(data));
const apiUrl = `/api/suggest/`;
return fetch(apiUrl, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data)
}).then(checkStatus)
    .then(r => r.json())
    .then(data => {
        console.log(data);
    });
});

const checkStatus = ((response: any) => {
  if (response.ok) {
    return response;
  } else {
    var error = new Error(response.statusText);
    console.log(error);
  //return Promise.reject(error);
  }
})

The script crashed with error
TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
After webkack it is looks:

exports.sendSuggestion = function (data) {
    var apiUrl = "/api/suggest/";
    return unfetch_1.default(apiUrl, {             //Code crashed here
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    }).then(checkStatus).then(function (r) {
        return r.json();
    }).then(function (data) {
        console.log(data);
    });
};
var checkStatus = function checkStatus(response) {
    if (response.ok) {
        return response;
    } else {
        var error = new Error(response.statusText);
        console.log(error);
    }
};

[developit]

Ah interesting, the .default is causing the context to switch to fetch instead of window. That's actually a incorrect behavior from Webpack / Babel though, are you able to post any details about your setup?

[DonikaV]

You mean webpack setup?

[QuentinRoy]

I have the same issue using Webpack 3 and Babel (babel-preset-env).

Original code:

import fetch from 'unfetch';
const test = fetch('http://localhost:8080');

Compiled code:

/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_unfetch__ = __webpack_require__(420);


const test = __WEBPACK_IMPORTED_MODULE_2_unfetch__["a" /* default */]('http://localhost:8080');

Note how unfetch is called with __WEBPACK_IMPORTED_MODULE_2_unfetch__ as context. I am not sure it is compliant with the ES module standard.

Fails on Chrome with

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation

and on Firefox with

Function.prototype.bind called on incompatible target

Interestingly, Safari doesn't care.

The following workaround works well.

import unfetch from 'unfetch';

// Fix a bug making unfetch not being properly bound with webpack.
const fetch = unfetch;

const test = fetch('http://localhost:8080');

A simple fix for unfetch could be to replace

export default typeof fetch=='function' ? fetch : function(url, options) {
  // [...]
}

with something like

export default typeof fetch=='function' ? fetch.bind() : function(url, options) {
  // [...]
}

If it is of any use, here is my webpack config.

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const resolve = relPath => path.resolve(__dirname, relPath);

module.exports = {
  entry: {
    experiment: ['babel-polyfill', './experiment'],
    'results-viewer': ['babel-polyfill', './results-viewer']
  },
  output: {
    path: resolve('build'),
    publicPath: '/',
    filename: './[name].js'
  },
  context: resolve('src'),
  resolve: {
    extensions: ['.js', '.json', '.jsx', '.css'],
    alias: {
      'state-machine': 'javascript-state-machine'
    }
  },
  module: {
    rules: [{
      test: /\.pug/,
      include: resolve('src'),
      use: 'pug-loader'
    }, {
      test: /\.s?css$/,
      include: resolve('src'),
      use: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader',
          options: { sourceMap: true }
        }, {
          loader: 'postcss-loader',
          options: { sourceMap: true }
        }, {
          loader: 'sass-loader',
          options: { sourceMap: true }
        }]
      })
    }, {
      test: /\.css$/,
      exclude: resolve('src'),
      use: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader',
          options: { sourceMap: true }
        }]
      })
    }, {
      test: /\.m?js$/,
      include: resolve('src'),
      use: 'babel-loader'
    }]
  },
  plugins: [
    new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
  ]
};

and my .babelrc

{
  "presets": [["env", {
    "targets": { "browsers": "last 1 chrome version, last 1 safari version, last 1 firefox version" },
    "modules": false,
    "loose": true
  }]],
  "plugins": ["transform-runtime"]
}

[LasaleFamine]

Seems like this is still a thing. I'm using:

• isomorphic-unfetch 3.0.0
• next 9.1.3
• react 16.11.0

On server side it's working as expected, but when I try something like making a call inside a simple useEffect I get the error. The workaround of using const fetch = unfetch.bind() worked for me as well.

[jbaiter]

Running into the same issue with Parcel v2.0beta.3 :-/