Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Example] with-polyfills : show how to load polyfills (#3568)
* Add an example showing how to use polyfills. * Add some example polyfills. * Fix a typo.
- Loading branch information
1 parent
0da17ca
commit 97cf428
Showing
5 changed files
with
78 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
console.log('Inside the /index.js page') | ||
|
||
export default () => ( | ||
<div> | ||
Hello World | ||
</div> | ||
) |