Fetch: Fetch breaks with update to 3.0.0

Created on 10 Sep 2018  Â·  23Comments  Â·  Source: github/fetch

It seems, that after updating the build to rollup, the code is not transpiled correctly for IE11. We are recieving this error.

SCRIPT1002: Wrong syntax
File: fetch-polyfill.js, row: 87, column: 1

The fetch-polyfill.js includes the fetch.js file from your repository.

This is where it fails:

export function Headers(headers) { // row 87
  this.map = {}

  if (headers instanceof Headers) {
    headers.forEach(function(value, name) {
      this.append(name, value)
    }, this)
  } else if (Array.isArray(headers)) {
    headers.forEach(function(header) {
      this.append(header[0], header[1])
    }, this)
  } else if (headers) {
    Object.getOwnPropertyNames(headers).forEach(function(name) {
      this.append(name, headers[name])
    }, this)
  }
}

export function syntax is not supported in IE11

Version: 3.0.0
OS: Linux, Windows

Version 2.0.4 works fine for us.

picture Filipoliko
👍2

Most helpful comment

With the new release, it looks like you need to pull the umd version from the dist folder.

Here's one possible way:

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js></script>
picture dpilafian on 30 Sep 2018
👍7

All 23 comments

I believe this also breaks IE10. Perhaps some transpiling is failing to occur?

roa-nyx picture roa-nyx on 10 Sep 2018

It appears this is also impacting JSDOM.

No need to run IE11, you can reproduce the problem in a mocha test:

// Imports
const fs =        require('fs');
const assert =    require('assert');
const { JSDOM } = require('jsdom');

// Setup
const window = new JSDOM('', { runScripts: 'outside-only' }).window;
const script = 'node_modules/whatwg-fetch/fetch.js';
window.eval(fs.readFileSync(script).toString());

// Specification Cases
describe('After loading "whatwg-fetch", the window object from JSDOM', () => {

   it('has a fetch() function', () => {
      assert.equal(typeof window.fetch, 'function');
      });

   });

With whatwg-fetch 2.0.4, the test runs successfully:

  After loading "whatwg-fetch", the window object from JSDOM
    ✓ has a fetch() function
  1 passing (20ms)

With whatwg-fetch 3.0.0, an Unexpected token error is encountered: 

undefined:78
export function Headers(headers) {
^^^^^^

SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at Object.<anonymous> (/Users/dem/projects/browser-fetch-json/spec-whatwg-fetch.js:9:8)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at /Users/dem/projects/browser-fetch-json/node_modules/mocha/lib/mocha.js:250:27
dpilafian picture dpilafian on 11 Sep 2018

Yes, fetch.js file now has the ES6 export syntax and will not be compatible with many browsers. This is why we build the UMD dist file and point to it from this package's main property, while the module property points to fetch.js.

The solution is to respect the main property from this package instead of loading the fetch.js file directly. The file reorganization and UMD introduction was the main reason for the major version bump to v3.

mislav picture mislav on 11 Sep 2018
😕8

How can this be used correctly via a CDN?

Grinnz picture Grinnz on 30 Sep 2018
👍5

With the new release, it looks like you need to pull the umd version from the dist folder.

Here's one possible way:

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js></script>
dpilafian picture dpilafian on 30 Sep 2018
👍7

Sadly the SRI option doesn't seem to work there, but otherwise it works, thanks!

Grinnz picture Grinnz on 30 Sep 2018

Is fetch.umd.js file supposed to be on the bower package ? Because it is not...

ypicard picture ypicard on 8 Feb 2019
👍2

To fix this, an easy solution would be to add a browser field in package.json that points to dist/fetch.umd.js.
It would also help Webpack find the right file. (https://webpack.js.org/configuration/resolve/)

rpellerin picture rpellerin on 5 Mar 2019

@rpellerin That would cause webpack to pickup the UMD package which is undesirable.

realityking picture realityking on 5 Mar 2019

@realityking I can't get it to work without the UMD package. It says something about no export found.
How do you make it work?

rpellerin picture rpellerin on 5 Mar 2019

This is a major problem as exports are not removed on standalone files served using CDN
E.g. (https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js)...

Update
polyfill.io also breaks due to version 3.0.0

I'm thankful for OS and appreciate the hard work you do – but when a repo becomes the de facto standard more attention should be paid to how changes cascades – affecting thousand of users.

From a quick test it looks as if removing the 5 export statements would make this CDN compatible again. _Maybe consider making a local ES branch and keep the 'old' JS branch for CDN_.

jakob-e picture jakob-e on 14 Mar 2019

The problem is still there, can anyone to fix this problem by removing the export and publish a CDN link.

billsliu picture billsliu on 31 Mar 2019

@jakob-e polyfill.io does not use github/fetch version 3. https://github.com/Financial-Times/polyfill-library/blob/master/package.json#L76

JakeChampion picture JakeChampion on 31 Mar 2019

Could this be listed as a Breaking Change in the Release notes of 3.0.0?

JesseDeBruijne picture JesseDeBruijne on 4 Apr 2019

@jakob-e: We do not maintain CDNJS and we are not responsible for when it does wrong things. The problem with CDNJS is that it published support for fetch 3.0.0 _without respecting the main property_ from our package https://github.com/github/fetch/issues/665#issuecomment-426447491. If you want bugs on CDNJS fixed, the proper place to report them is here: https://github.com/cdnjs/cdnjs/issues

JSDelivr seems to be doing the right thing: https://www.jsdelivr.com/package/npm/whatwg-fetch

@JesseDeBruijne What do you expect to be listed as a Breaking Change, exactly? For most intents and purposes, how this package behaves didn't change:

  • whatwg-fetch 2.x: the file referenced by the main property in package.json can be loaded in any browser and polyfills window.fetch if missing;
  • whatwg-fetch 3.0: the file referenced by the main property in package.json can be loaded in any browser and polyfills window.fetch if missing.
mislav picture mislav on 5 Apr 2019

@mislav I'm aware, just asking you to be more careful with breaking changes that will cascade (automated scripts etc.). Also as mentioned it looks like you can simply remove _the 5 export lines_ to make the current version 3 run on CDN too.

jakob-e picture jakob-e on 5 Apr 2019

@jakob-e For sure; if I knew how many cascading failures would the 3.0 release cause, I would have done this more carefully. 😣 However, I still don't believe that our team is responsible for actually fixing most of those failures. Too many people and scripts have hardcoded loading the whatwg-fetch/fetch.js file in their apps instead of parsing the whatwg-fetch/package.json properly, and they will have to either:

  1. Fix their scripts/processes; or
  2. Avoid upgrading to a major version of a library they're not ready for yet. When it comes to semver, "Major" literally means "breaking changes", if anyone was still unclear about this!

As for the CDN problem, here is what we (the maintainer team) _don't_ have to do to fix it:

  1. We don't have to remove any export statements. We ship an ES module with our package now, and removing those exports would break the module.
  2. We don't have to to do _literally anything else_ to un-break the CDNs, since we didn't publish nor maintain whatwg-fetch on any CDN in the first place. That was all a community effort, and it's beyond our control.

What _CDNs should do_ to fix this:

  • Parse the package.json of whatwg-fetch to determine the file referenced by the main property, and serve that to browsers.

I'm closing this now because there's not anything actionable for us to do to address the issues people have been having in this thread. If I have missed something, please let me know!

mislav picture mislav on 8 Apr 2019
❤1 👍1

If anyone is still using this package via bower... I'm not sure what the fix is?

jrochkind picture jrochkind on 5 Jan 2020

(Also this does seem an odd choice for a polyfill. Do any browsers actually exist that need a fetch polyfill and can do ES6? I don't understand what targets or use-cases an ES6 fetch polyfill is serving, but that just may be my lack of contemporary JS expertise. For me, not being an expert, it makes it somewhat more complicated to figure out how to properly deliver this polyfill to browsers that actually need it.)

jrochkind picture jrochkind on 5 Jan 2020
👍5 👀1

I don't get it.. what is the solution? We followed this: https://web.dev/codelab-serve-modern-code/ don't know if we updated this lib in the process also but it breaks even in chrome now

We have this for IE11 (webpack.config.js):

const legacyConfig = (env, argv) => {
  const nodeEnv = env.NODE_ENV ? env.NODE_ENV : 'production';
  const plugins = getPlugins(nodeEnv);
  return {
    entry,
    mode: nodeEnv,
    entry: ['formdata-polyfill', 'whatwg-fetch', `${APP_DIR}/index.js`],

and for modern browser supporting modules we don't even include this polyfill but seems like Chrome tries to load it anyway..

const moduleConfig = (env, argv) => {
  const nodeEnv = env.NODE_ENV ? env.NODE_ENV : 'production';
  const plugins = getPlugins(nodeEnv);
  return {
    entry,
    mode: nodeEnv,
    entry: [`${APP_DIR}/index.js`],

Is that not the way to load it? We use webpack 4

Edit: Also I see that we're still on "version": "2.0.4", but it broke after following above tutorial.. Tried updating to v3.0.0 but get the same issue

OZZlE picture OZZlE on 12 Jun 2020 
fetch.js:466 Uncaught Error: Module build failed: SyntaxError: /Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/src/index.js: Unexpected token (110:4)

  108 | 
  109 |   return (
> 110 |     <Switch>
      |     ^
  111 |       <Route>
  112 |         <React.Fragment>
  113 |           <ResponsiveStyled>
    at Parser.raise (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7017)
    at Parser.unexpected (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8395)
    at Parser.parseExprAtom (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9673)
    at Parser.parseExprSubscripts (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9259)
    at Parser.parseMaybeUnary (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9239)
    at Parser.parseExprOps (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9109)
    at Parser.parseMaybeConditional (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9082)
    at Parser.parseMaybeAssign (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9037)
    at Parser.parseParenAndDistinguishExpression (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9814)
    at Parser.parseExprAtom (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9594)
    at Parser.parseExprSubscripts (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9259)
    at Parser.parseMaybeUnary (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9239)
    at Parser.parseExprOps (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9109)
    at Parser.parseMaybeConditional (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9082)
    at Parser.parseMaybeAssign (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9037)
    at Parser.parseExpression (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8989)
    at Parser.parseReturnStatement (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11057)
    at Parser.parseStatementContent (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10738)
    at Parser.parseStatement (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10690)
    at Parser.parseBlockOrModuleBlockBody (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11264)
    at Parser.parseBlockBody (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11251)
    at Parser.parseBlock (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11235)
    at Parser.parseFunctionBody (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10252)
    at Parser.parseArrowExpression (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10209)
    at Parser.parseParenAndDistinguishExpression (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9838)
    at Parser.parseExprAtom (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9594)
    at Parser.parseExprSubscripts (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9259)
    at Parser.parseMaybeUnary (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9239)
    at Parser.parseExprOps (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9109)
    at Parser.parseMaybeConditional (/Volumes/Projects/webserver/company/www/skin/frontend/rwd/company/js/react-frontend/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9082)
    at Object.<anonymous> (fetch.js:466)
    at __webpack_require__ (bootstrap 7b83d282fb1f5e909015:19)
    at Object.<anonymous> (es6.array.find.js:14)
    at __webpack_require__ (bootstrap 7b83d282fb1f5e909015:19)
    at bootstrap 7b83d282fb1f5e909015:73
    at bootstrap 7b83d282fb1f5e909015:73
OZZlE picture OZZlE on 12 Jun 2020

"Unexpected token"

Skärmavbild 2020-06-12 kl 10 02 22

OZZlE picture OZZlE on 12 Jun 2020

Hmm seems the issue is that this file has BOM inside it... hexdump -n 3 -C node_modules/whatwg-fetch/fetch.js @mislav

OZZlE picture OZZlE on 15 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

codeashian picture codeashian  Â·  3Comments
kocur4d picture kocur4d  Â·  3Comments
ccorcos picture ccorcos  Â·  3Comments
javan picture javan  Â·  3Comments
sndsgn picture sndsgn  Â·  3Comments