Next.js: Syntax error on IE11 (or any browser without arrow-functions support)

[lucasconstantino]

Expected Behavior

It should be possible to access the application with older browsers when running next dev.

Current Behavior

IE11, for instance, throws a Syntax error when executing main.js.

Steps to Reproduce (for bugs)

1. Install Next.js
2. Create a demo page
3. Run next dev
4. Access application using IE11

I've setup a repo to reproduce the bug: https://github.com/lucasconstantino/next-ie11-syntax-error

Context

I'm having a hard time testing my application on IE11 locally.

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.1.4 |
| node | 7.10.0 |
| OS | any windows (tested on browserstack) |
| browser | IE11 |

[lucasconstantino]

Pasting some lines of code related to the problem, so to make it appear on search in case anyone needs it:

node_modules/next/node_modules/strip-ansi/index.js:4:

module.exports = input => typeof input === 'string' ? input.replace(ansiRegex(), '') : input;

node_modules/next/node_modules/ansi-regex/index.js:3:

module.exports = () => {
        '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'

[Jinnified]

having the same issue, how did you solve it?

[timneutkens]

@Jinnified it's fine in production cause the dependency isn't added there. We'll have to transpile it in dev though.

[lucasconstantino]

@Jinnified I didn't really sove it, but for testing locally I'm building the app with next build & next start.

[Jinnified]

hi, @timneutkens , i am not sure it's only under dev mode, it occurs to me both on dev and production, however, if I either use yarn to start sever with resolutions

"resolutions": {
    "next/strip-ansi": "3.0.1"
  },

or as you mentioned in another related post, i upgrade next version to canary, then this issue would be gone in IE11.

BUT, in IE 10 or below, there is another error would break the script, something like Set can not be found or something.

[timneutkens]

@Jinnified the fix is only released under next@canary at this moment 👍

BUT, in IE 10 or below, there is another error would break the script, something like Set can not be found or something.

you're required to load your own polyfills for IE 10 and below 🙂

[mgiraldo]

@timneutkens what polyfills do I need for it to work on ie11?

[kachkaev]

It'd be great to see an IE polyfill as a next-plugin one day!

I'm thinking of rewriting one existing PHP website with Next.js and the ambiguity of IE support reduces my enthusiasm a bit 😅 . There are still customers using IE11 (and even IE10, 9 and 8 😱), so it be great to see a summary of what Next.js can offer to these people. Even when we're talking about <5% of the website audience overall, absolute numbers of visits can be still big and the profits those people generate can be also considerable (thankfully, not in my case 😃).

[yves-s]

There is support for - at least as I checked - IE11 @kachkaev but only for testing you have to do a build and use that (yarn build && yarn start) as @lucasconstantino already suggested. Since you probably will run a proper build in production you shouldn't have a problem.

[timneutkens]

Next.js by itself runs fine in ie11 now, only node_modules can cause the arrow function => error now, as we don't transpile those and they can be published without being compiled using Babel or similar.

I'm not sure about IE10/9/8, but those generally require polyfills.

I'd be happy to take in a pull-request to next-plugins to make poly filling easier / automatic.