Skip to content
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

Fetch breaks with update to 3.0.0 #656

Closed
Filipoliko opened this issue Sep 10, 2018 · 23 comments
Closed

Fetch breaks with update to 3.0.0 #656

Filipoliko opened this issue Sep 10, 2018 · 23 comments

Comments

@Filipoliko
Copy link

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.

@roa-nyx
Copy link

roa-nyx commented Sep 10, 2018

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

@dpilafian
Copy link

dpilafian commented Sep 11, 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

@mislav
Copy link
Contributor

mislav commented Sep 11, 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 mislav changed the title Fetch breaks for IE11 with update to 3.0.0 Fetch breaks with update to 3.0.0 Sep 11, 2018
@Grinnz
Copy link

Grinnz commented Sep 30, 2018

How can this be used correctly via a CDN?

@dpilafian
Copy link

dpilafian commented Sep 30, 2018

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/promise-polyfill@8.1/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js></script>

@Grinnz
Copy link

Grinnz commented Sep 30, 2018

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

@ypicard
Copy link

ypicard commented Feb 8, 2019

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

@rpellerin
Copy link

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/)

@realityking
Copy link

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

@rpellerin
Copy link

rpellerin commented Mar 5, 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?

@jakob-e
Copy link

jakob-e commented Mar 14, 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.

@billsliu
Copy link

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

@JakeChampion
Copy link
Owner

@JesseDeBruijne
Copy link

JesseDeBruijne commented Apr 4, 2019

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

@mislav
Copy link
Contributor

mislav commented Apr 5, 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 #665 (comment). 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.

@jakob-e
Copy link

jakob-e commented Apr 5, 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.

@mislav
Copy link
Contributor

mislav commented Apr 8, 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!

@jrochkind
Copy link

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

@jrochkind
Copy link

(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.)

@OZZlE
Copy link

OZZlE commented Jun 12, 2020

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
Copy link

OZZlE commented Jun 12, 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)

�[0m �[90m 108 | �[39m�[0m
�[0m �[90m 109 | �[39m  �[36mreturn�[39m (�[0m
�[0m�[31m�[1m>�[22m�[39m�[90m 110 | �[39m    �[33m<�[39m�[33mSwitch�[39m�[33m>�[39m�[0m
�[0m �[90m     | �[39m    �[31m�[1m^�[22m�[39m�[0m
�[0m �[90m 111 | �[39m      �[33m<�[39m�[33mRoute�[39m�[33m>�[39m�[0m
�[0m �[90m 112 | �[39m        �[33m<�[39m�[33mReact�[39m�[33m.�[39m�[33mFragment�[39m�[33m>�[39m�[0m
�[0m �[90m 113 | �[39m          �[33m<�[39m�[33mResponsiveStyled�[39m�[33m>�[39m�[0m
    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
Copy link

OZZlE commented Jun 12, 2020

"Unexpected token"

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

@OZZlE
Copy link

OZZlE commented Jun 15, 2020

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

15 participants