From 97cf4281dc0c70457bf4d5901d6e2a98bfd6f05f Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 4 Feb 2018 16:20:48 +0530
Subject: [PATCH] [Example] with-polyfills : show how to load polyfills (#3568)

* Add an example showing how to use polyfills.

* Add some example polyfills.

* Fix a typo.
---
 examples/with-polyfills/README.md           | 32 +++++++++++++++++++++
 examples/with-polyfills/client/polyfills.js | 13 +++++++++
 examples/with-polyfills/next.config.js      | 12 ++++++++
 examples/with-polyfills/package.json        | 14 +++++++++
 examples/with-polyfills/pages/index.js      |  7 +++++
 5 files changed, 78 insertions(+)
 create mode 100644 examples/with-polyfills/README.md
 create mode 100644 examples/with-polyfills/client/polyfills.js
 create mode 100644 examples/with-polyfills/next.config.js
 create mode 100644 examples/with-polyfills/package.json
 create mode 100644 examples/with-polyfills/pages/index.js

diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md
new file mode 100644
index 000000000000..818caaa68113
--- /dev/null
+++ b/examples/with-polyfills/README.md
@@ -0,0 +1,32 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-polyfills)
+
+# Example app with polyfills
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-polyfills
+cd with-polyfills
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Next.js supports browsers from IE10 to the latest. It adds polyfills as they need. But Next.js cannot add polyfills for code inside NPM modules.
+So sometimes, you need to add polyfills by yourself.
+
+This how you can do it easily with Next.js's custom webpack config feature.
diff --git a/examples/with-polyfills/client/polyfills.js b/examples/with-polyfills/client/polyfills.js
new file mode 100644
index 000000000000..8314bb59c338
--- /dev/null
+++ b/examples/with-polyfills/client/polyfills.js
@@ -0,0 +1,13 @@
+/* eslint no-extend-native: 0 */
+
+// Add your polyfills
+// This files runs at the very beginning (even before React and Next.js core)
+
+console.log('Load your polyfills')
+
+// core-js comes with Next.js. So, you can import it like below
+import includes from 'core-js/library/fn/string/virtual/includes'
+import repeat from 'core-js/library/fn/string/virtual/repeat'
+
+String.prototype.includes = includes
+String.prototype.repeat = repeat
diff --git a/examples/with-polyfills/next.config.js b/examples/with-polyfills/next.config.js
new file mode 100644
index 000000000000..eca7970862c9
--- /dev/null
+++ b/examples/with-polyfills/next.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  webpack: function (cfg) {
+    const originalEntry = cfg.entry
+    cfg.entry = async () => {
+      const entries = await originalEntry()
+      entries['main.js'].unshift('./client/polyfills.js')
+      return entries
+    }
+
+    return cfg
+  }
+}
diff --git a/examples/with-polyfills/package.json b/examples/with-polyfills/package.json
new file mode 100644
index 000000000000..92155b2d409e
--- /dev/null
+++ b/examples/with-polyfills/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "with-polyfills",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}
diff --git a/examples/with-polyfills/pages/index.js b/examples/with-polyfills/pages/index.js
new file mode 100644
index 000000000000..95af92315a28
--- /dev/null
+++ b/examples/with-polyfills/pages/index.js
@@ -0,0 +1,7 @@
+console.log('Inside the /index.js page')
+
+export default () => (
+  <div>
+    Hello World
+  </div>
+)