Transpile packages in react-intl example

[jonespen]

We noticed that our Next.js app shipped code containing const, which broke some older browsers. Turns out that react-intl docs, react-intl and its underlying libraries must be transpiled to support older browsers.

To verify this we used es-check: npm run build && npx es-check --module es5 ./.next/static/**/*.js.

There is probably other ways to solve this, but I found next-transpile-modules being the easiest solution.

[ijjk]

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
buildDuration	9.9s	10s	⚠️ +138ms
nodeModulesSize	61 MB	61 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..e3d8.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
index.html gzip	917 B	917 B	✓
link.html gzip	926 B	926 B	✓
withRouter.html gzip	915 B	915 B	✓
Overall change	2.76 kB	2.76 kB	✓

---

Serverless Mode (Decrease detected ✓)

General

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
buildDuration	10.6s	11.1s	⚠️ +412ms
nodeModulesSize	61 MB	61 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..e3d8.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall decrease ✓

	zeit/next.js canary	jonespen/next.js transpile-react-intl	Change
_error.js gzip	233 kB	233 kB	-281 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	956 B	956 B	✓
index.js gzip	233 kB	233 kB	-33 B
link.js gzip	243 kB	243 kB	⚠️ +79 B
routerDirect.js gzip	241 kB	241 kB	-51 B
withRouter.js gzip	241 kB	241 kB	⚠️ +133 B
Overall change	1.19 MB	1.19 MB	-153 B