Next.js: IE 11 "Expected Identifier" error in commons chunk

[mherodev]

Bug report

Our production build of our app breaks in IE 11 due to a syntax error:

Describe the bug

Tracking down this code leads to the first instance of the spread operator in a function call, i.e.

Looking into it, it appears IE 11 doesn't support any kind of spread operations:

That said, no matter which targets values I pass to ['next/babel', { 'preset-env': ... }], the build output for next continues to contain these spread operators.

Tracking this spread operator down further, it looks like its coming from the npm debug package, i.e. https://github.com/visionmedia/debug/blob/master/src/common.js

I imagine this should be transpiled away normally.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install debug into your favorite Next.js project and import it into enough pages for it to end up in commons (although you can just check against a specific page's transpile), i.e.

npm i debug --save

```js
import debug from 'debug';

2. Build project for a production deployment, i.e.
```bash
npm run build # next build

1. Search .next/static/chunks/commons.blah.js or .next/static/blah/pages/myPage.js for ... (you can verify you're in the right file by searching for .skips first which is code present in the debug package that doesn't change when transpiled).

Expected behavior

All spread operators should be transpiled to something legacy browser compatible.

System information

• OS: macOS
• Version of Next.js: Appears both in v7 and v8

Additional Comments

I've tried various babel configs; tempted to manually transpile the transpiled code one more time using a plugin to specifically resolve this (haven't had luck reprocessing with preset-env... it seems to do too much).

Here's an example:

module.exports = {
  presets: [['next/babel', { 'preset-env': { targets: { ie: '11' }}}]],
};

[lineape]

By default, babel doesn't transpile node_modules.

A possible solution would be to use next-transpile-modules.

I've had to do this on my app, for debug specifically.

This should work:

// next.config.js
const withTM = require('next-transpile-modules');

module.exports = withTM({
  transpileModules: ['debug']
});

[Timer]

☝️ you need to compile specific node_modules if they use too new of a syntax.

[mherodev]

Thanks guys! I'll give this a shot.