Repository: mdn/kuma

Issue:
Site should work even if you don't have window.fetch
We're getting a lot of error boundaries happen because people's browser don't have `window.fetch`. 


Discussion:
Possible solutions:

* `if (window.fetch) { React.hydrate(bla, bla) }`
* Include a polyfill like preact-cli does
* wrap the use of window.fetch in the whoami API call so it bails early
* Use Webpack and/or babel polyfills
Of about 2,000 errors...
<img width="877" alt="Screen Shot 2019-10-15 at 12 50 08 PM" src="https://user-images.githubusercontent.com/26739/66852184-5f7a9c00-ef4a-11e9-845d-3e7b3a1388b9.png">

About 400 are related to `fetch`
<img width="838" alt="Screen Shot 2019-10-15 at 12 49 32 PM" src="https://user-images.githubusercontent.com/26739/66852139-496cdb80-ef4a-11e9-8566-0148ca385a5f.png">

I.e. about 20%. 
For example, we have this:
```javascript
        if (
            window.origin !== 'https://translate.googleusercontent.com' &&
            !isIE10 &&
            !isIE11
        ) {
            ReactDOM.hydrate(app, container);
        }
```
We could do this:
```diff
        if (
+          typeof window.fetch !== 'undefined' &&
            window.origin !== 'https://translate.googleusercontent.com' &&
            !isIE10 &&
            !isIE11
        ) {
            ReactDOM.hydrate(app, container);
        }
```
But that would disable all other React event handlers. 

`fetch` is currently used in two places:

1. The call to `/api/v1/whoami`
2. The newsletter signup. Which, in theory has a callback functionality. 

We still have `fetch` in `search-results-page.jsx` but that's not used I don't think now that we server-side render the site-search. 
Actually, we could do this:
```html
<script>window.fetch||document.write('<script src="https://unpkg.com/unfetch/polyfill"><\/script>')</script>
```
Then we don't need to add any code to our codebase. We also don't need to muck with existing code. 

The question still remains; how to test this?
@peterbe 👍 Nice, I like it!
A concern is that if `fetch` doesn't exist, and we "fix" it with [`unfetch`](https://github.com/developit/unfetch) it will just proceed to the next problem. E.g. `Symbol` not being a function. 
So it might be pointless to fix `fetch` on its own because browsers that don't have `fetch` also don't have a bunch of other stuff. 

Resolving patch:
diff --git a/kuma/settings/common.py b/kuma/settings/common.py
--- a/kuma/settings/common.py
+++ b/kuma/settings/common.py
@@ -930,6 +930,9 @@ def pipeline_one_scss(slug, **kwargs):
             'react.js'
         ),
         'output_filename': 'build/js/react-main.js',
+        'extra_context': {
+            'defer': True,
+        },
     },
     'bcd-signal': {
         'source_filenames': (
@@ -1098,6 +1101,20 @@ def pipeline_one_scss(slug, **kwargs):
             'async': True,
         },
     },
+    'fetch-polyfill': {
+        'source_filenames': (
+            'js/libs/unfetch-4.1.0.min.js',
+        ),
+        'output_filename': 'build/js/fetch-polyfill.js',
+        'template_name': 'pipeline/javascript-embedded.jinja',
+    },
+    'js-polyfill': {
+        'source_filenames': (
+            'js/libs/polyfill-v3.min.js',
+        ),
+        'output_filename': 'build/js/js-polyfill.js',
+        'template_name': 'pipeline/javascript-embedded.jinja',
+    },
 }
 
 PIPELINE = {


Test patch: