New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent Illegal invocation Error in webpack #20

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
9 participants
@rockymeza

rockymeza commented Apr 23, 2015

I am using ES6 modules with webpack and I ran into an issue. My code was something like this:

import fetch from 'isomorphic-fetch';

fetch(url)
  // .then do stuff

which raised an Illegal invocation Error. This is the same error that happens when you do something like this:

log = console.log
log('hello'); // Error

I looked at the compiled code and it looked like this:

var _fetch = __webpack_require__(10);
var _fetch2 = _interopRequireWildcard(_fetch);

_fetch2['default'](url);

which is the problem because now the fetch function is called with a this value of the _fetch2 module. It is similar to doing the following:

var obj = {myFetch: fetch};

obj.myFetch(url); // Error

So I just made sure that fetch was bound to the window object on importing. This of course assumes that Function.bind exists or was polyfilled.

@crccheck

This comment has been minimized.

crccheck commented May 5, 2015

Thanks. This was happening to me with browserify and babel in Chrome (but not Firefox) too. This was my workaround:

import fetch_ from 'isomorphic-fetch';
var fetch = fetch_.bind(undefined);

My jest tests remained happy with this hack too.

@beshanoe

This comment has been minimized.

beshanoe commented May 6, 2015

Thank you! Just ran into the same problem. Npm package should be updated ASAP

@rockymeza

This comment has been minimized.

rockymeza commented May 8, 2015

Thanks!

-rocky
2015年5月6日 下午3:25于 "Max" notifications@github.com写道:

Thank you! Just ran into the same problem. Npm package should be updated
ASAP


Reply to this email directly or view it on GitHub
#20 (comment)
.

@vh vh referenced this pull request May 8, 2015

Closed

Not working in Chrome (ver 42) #1

@babsonmatt

This comment has been minimized.

babsonmatt commented May 13, 2015

Thanks!

@zbyte64

This comment has been minimized.

zbyte64 commented Jun 5, 2015

Life saver 👍

@khtdr

This comment has been minimized.

khtdr commented Jun 27, 2015

just import the library and let it pollute the global/window namespace.

wrong:
import fetch from 'isomorphic-fetch'; fetch(...);

no error:
import 'isomorphic-fetch'; fetch(...);

@tomchentw

This comment has been minimized.

tomchentw commented Jul 5, 2015

My experience and workaround on this is simple: don't use import/require for polyfills.
Instead, use webpack.ProvidePlugin for them.

new webpack.ProvidePlugin({
  "fetch": "isomorphic-fetch",
});
@keithamus

This comment has been minimized.

Contributor

keithamus commented Jul 16, 2015

Just been bitten by this. It'd be great to get it merged @matthew-andrews 😄

@keithamus

This comment has been minimized.

Contributor

keithamus commented Jul 16, 2015

@matthew-andrews this one can be closed due to #27 being merged 😄

@matthew-andrews

This comment has been minimized.

Owner

matthew-andrews commented Jul 16, 2015

Released in v2.1.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment