Transpiling / Polyfilling with Next.js 9.3

[danlutz]

Hi!
From the announcement blog post of version 9.3 I can see that the framework will now handle split bundles into module/no-module versions, with polyfills added to the no-module version.

Question

Is it still necessary to add own polyfills/transpile code with babel afterwards? At the moment, we use next-transpile-modules to transpile specific node-modules, and use this babel.config.js to transpile out application code:

module.exports = {
	plugins: [],
	env: {
		development: {
			presets: ["next/babel"],
		},
		production: {
			comments: false,
			presets: [
				[
					"next/babel",
					{
						"preset-env": {
							debug: true,
							useBuiltIns: "usage",
						},
						"transform-runtime": {},
						"styled-jsx": {},
						"class-properties": {},
					},
				],
			],
			plugins: ["@babel/plugin-transform-arrow-functions"],
		},
		test: {
			presets: ["next/babel"],
		},
	},
}

Will this actually make the situation worse? Would appreciate to have some information about this topic! We need to support IE11 🙅‍♂ .

Documentation

It would be nice to add the topics transpiling and polyfilling to the Next.js documentation. I would like help with this for sure if someone who knows more about this will point me to the correct resources.

Thanks for the great work with the new update, keep it up 👍

[Timer]

You should be able to safely delete that entire file!

[timneutkens]

Should I also remove the next-transpile-modules plugin?

Depends, Next.js will not compile node_modules, meaning that if they use eg arrow functions it won't work. However the preset-env config that you have is not needed, it can just run through next/babel.

[danlutz]

Okay, will keep the plugin then, thanks for the response!

We also include the polyfill code from the with-polyfills example repo

Using this polyfills file:

/* eslint no-extend-native: 0 */
// 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"
import flat from "core-js/library/fn/array/virtual/flatten"
import flatMap from "core-js/library/fn/array/virtual/flat-map"

// Add your polyfills
String.prototype.includes = includes
String.prototype.repeat = repeat
Array.prototype.flat = flat
Array.prototype.flatMap = flatMap

Is it also safe to remove?

[timneutkens]

That should definitely be removed.

[danlutz]

Removing the polyfills fixed almost all pages, but on our checkout page we get this error (in IE11 on Browserstack, Windows 10):

So I guess somehow the flat polyfill is not loaded.

UPDATE: It also happens in "old" Edge (non-chromium version on Windows 10)

UPDATE 2:
After inspecting next-polyfill-nomodule, i saw that only the flat-map polyfill is imported, not the regular flat polyfill, although no-module browsers do not support it:
https://caniuse.com/#feat=array-flat

[timneutkens]

It can be added, feel free to PR it in: https://github.com/zeit/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js#L5

[danlutz]

And if a specific polyfill needs to be added, how would on accomplish it?

Like i mentioned, I would love to see more of this in the official documentation, and would like to help write it, if you can point me in the right direction.

[timneutkens]

And if a specific polyfill needs to be added, how would on accomplish it?

Generally it's not globally needed, so you can add it only where it's used.

[danlutz]

So if I want to e.g. import a Array.flat polyfill, i would include this line at the beginning of the page:

import 'core-js/features/array/flat'

Is it safe to replace core-js 2 with core-js 3? As it is used by next internally:

[xyy94813]

I write a plugin next-with-polyfill

The plugin does the same thing as the official example

But I have doubts about its implementation:

• why use main.js to inject customize polyfill.

See the final html fragment:

<script nomodule="" src="/_next/static/runtime/polyfills-hash.js"></script>
<script data-next-page="/" src="/_next/static/hash/pages/index.js" async=""></script>
<script src="/_next/static/runtime/webpack-hash.js" async=""></script>
<script src="/_next/static/chunks/commons.hash.js" async=""></script>
<script src="/_next/static/runtime/main-hash.js" async=""></script>

And, the main.js entry is a async script.
if page use some api need to ployfill and excute before main.js, it will not work.

So, why not use polyfill.js as entry?

'polyfill.js': ['customize polyfill', 'next.offical.polyfill.js']

[dendrochronology]

Now that 9.4's out, what's the current recommended practice for how/where to polyfill external modules? I'm asking specifically for IE support. I spent a good chunk of this afternoon trying to get even basic examples from the main Next repo to work in IE 11, to no avail. I also see very, very different behavior between next dev vs next build && next start, which further complicates matters.

For example, the current live with-apollo demo works for me in IE 11: https://next-with-apollo.now.sh

If I bootstrap it locally, next dev works fine in modern browsers. In IE, trying to add new entries in the demo app triggers an infinite loop of error messages about not having an addShadow method in the console (I also see this in every non-trivial Next example when running next dev), locking up the browser with a WSOD. If I bring it up via next build && next start, then I just get one error about not having a get method, which I assume means it's missing the Map() polyfill, even though I've tried every code example and arcane incantation I can find to make that happen (next-transpile-modules, manual imports, babel hacks, etc.).

I know IE is dirt old, but I'm trying to push code out to manufacturers and folks running giant embedded systems, and many of those still have IE. sigh

[franknoel]

I'm also wondering what's the best practices right now for IE11.
I'm getting errors like map is undefined, set is undefined and $RefreshSig$ is undefined with Next 9.4 and the configuration that @Timer and @timneutkens suggested above.

I'm wondering what's the issue here since Next is supposed to load core-js polyfills for those functions.

Is that unrelated to Next?

Shoud I use next-transpile-module? If so, I don't even know whick packages to transpile.