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

DonikaV · 2017-06-23T11:43:56Z

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 · 2017-06-23T14:36:35Z

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 · 2017-06-24T08:57:24Z

You mean webpack setup?

Fixes developit#46

QuentinRoy · 2017-06-27T06:18:53Z

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"]
}

Fix fetch errors.

…ion. see: developit/unfetch#46

developit/unfetch#46 https://github.com/developit/unfetch

LasaleFamine · 2019-11-11T15:34:01Z

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.

jhnns mentioned this issue Jun 26, 2017

Fix illegal invocation errors #47

Merged

jhnns added a commit to jhnns/unfetch that referenced this issue Jun 26, 2017

Fix illegal invocation errors

Verified

This commit was signed with a verified signature.

jhnns Johannes Ewald

GPG key ID: F039D35BD529A432 Learn about signing commits

974ef39

Fixes developit#46

QuentinRoy added a commit to QuentinRoy/lightmill-js that referenced this issue Jun 27, 2017

fix(server-interface): Workaround for developit/unfetch#46.

9c2b529

Fix fetch errors.

developit closed this in #47 Jun 28, 2017

morgler mentioned this issue Aug 12, 2017

Network error: TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation orbitjs/orbit#452

Closed

BobrD added a commit to BobrD/loader that referenced this issue Sep 30, 2017

fix TypeError: Failed to execute 'fetch' on 'Window': Illegal invocat…

8c15d8d

…ion. see: developit/unfetch#46

kvpt mentioned this issue Mar 12, 2018

Issue with Webpack elbywan/wretch#19

Closed

mrotaru added a commit to mrotaru/code-test-react that referenced this issue May 8, 2018

fix: fetch webpack binding, use unfetch

06ce238

developit/unfetch#46 https://github.com/developit/unfetch

AtlasTheBot mentioned this issue Aug 15, 2019

Illegal invocation at Booru.search AtlasTheBot/booru#35

Closed

MaxMEllon mentioned this issue Nov 13, 2019

Fix: Failed to execute 'fetch' on 'Window' Illegal invocation. recruit-tech/specter#63

Merged

tfliss mentioned this issue Jan 8, 2020

Project running in React App rubensworks/GraphQL-LD.js#11

Closed

developit / unfetch

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

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

DonikaV commented Jun 23, 2017 •

edited

developit commented Jun 23, 2017

DonikaV commented Jun 24, 2017

QuentinRoy commented Jun 27, 2017 •

edited

LasaleFamine commented Nov 11, 2019

developit / unfetch

Join GitHub today

GitHub is where the world builds software

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

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

Comments

DonikaV commented Jun 23, 2017 • edited

developit commented Jun 23, 2017

DonikaV commented Jun 24, 2017

QuentinRoy commented Jun 27, 2017 • edited

LasaleFamine commented Nov 11, 2019

Essential cookies

Always active

Analytics cookies

DonikaV commented Jun 23, 2017 •

edited

QuentinRoy commented Jun 27, 2017 •

edited