Examples updated to v3.0.3 don't work in IE 11

[urban]

I'd like to use the static page export feature of Next.js v3.0.3 however when I test in IE 11, a syntax error in the main.js file kills all JavaScript.

You can reproduce this issue with the following:

git clone https://github.com/zeit/next.js.git
cd next.js/examples/data-fetch
yarn install
yarn add next@3.0.3
yarn run dev

Any advice on how to get Next.js v3 with IE 11 working would be great.

[jaydenseric]

What's the specific error? We reported and fixed a few IE11 issues testing the v3 prerelease, but everything was working fine last time I checked. We don't use use the static export stuff though.

[urban]

Looks like the Babel + Webpack combo isn't downgrading the JavaScript in the 2 dependencies chalk/ansi-regex and chalk/strip-ansi which are written using ES6 arrow functions. IE 11 is seeing the following code and throwing a syntax error.

"use strict";

const ansiRegex = __webpack_require__(314);

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


/***/ }),
/* 314 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


module.exports = () => {
 const pattern = [
  '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
  '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'
 ].join('|');

 return new RegExp(pattern, 'g');
};


/***/ }),

I "think" this is the only section in the main.js file with ES6 code.

See the following screenshots:

[jaydenseric]

Most packages by Sindre Sorhus are explicitly for recent Node environments only and not browsers, he closes a lot of issues relating to that as won't-fix. Babel does not operate on node_modules, Webpack will add any ES6 syntax to the bundle as-is from an npm package.

It would be good to work out why these packages are included in the client bundle.

[urban]

Looks like strip-ansi is a dependency however I don't see where with a simple GitHub search. I'll have to dig into this further in the AM.

[urban]

This error only exists when running next dev. If I add the following to the data-fetch example:

// next.config.js
module.exports = {
  exportPathMap: function() {
    return {
      "/": { page: "/" },
      "/preact": { page: "/preact" }
    };
  }
};

Then add the export script to the package.json file

  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next build && next export",
    "start": "next start"
  },

When I type the following in terminal, everything works fine.

yarn run export
cd out
python -m SimpleHTTPServer 3000

BTW, I'm testing all this on a mac and using the Free Virtual Machines by MS.

[jaydenseric]

This error only exists when running next dev

I can't remember where it's documented, don't hold me to it, but I'm pretty sure IE11 is only supported for builds.

[mettin]

I'm having the exact same issue, actually had it with "^3.0.1-beta.18" also.

[cschroeter]

Same issue here

[pencilcheck]

Having same issue but only when running next build on next@3.0.6.

Also not limited to, but next@3 has strip-ansi as dependencies and it has dependency on ansi-regex

[cheshirecode]

@timneutkens I believe this is due to #2325. Probably requires a PR to downgrade strip-ansi similar to what was done in facebook/create-react-app#2692, if it doesn't break anything in order to keep things working in dev for IE11.

[timneutkens]

@cheshirecode great catch, I'm open to downgrading the package 👍

[jwillem]

I've submitted a PR to this. #2860

[jwillem]

could be closed. fixed in version 3.1.0.