Next.js: 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 [email protected]
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 [email protected].

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 https://github.com/zeit/next.js/pull/2325. Probably requires a PR to downgrade strip-ansi similar to what was done in https://github.com/facebookincubator/create-react-app/pull/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.

[arunoda]

Thanks for the PR

[cheshirecode]

Seeing the same issue next: beta in https://github.com/zeit/next.js/blob/master/package.json#L93. @arunoda should this issue be reopened?

[Lizhooh]

v 4.1.0 In IE 11 Error.

The object does not support the "from" property or method
The TypeError: object does not support the "from" property or method
At _toConsumableArray (http://127.0.0.1:3000/_next/1508422415649/main.js:13836:169)
At Anonymous function (http://127.0.0.1:3000/_next/1508422415649/main.js:13896:9)
At instantiate (http://127.0.0.1:3000/_next/1508422415649/main.js:13894:8)
At Unknown (Function code:2:10)
At mountIndeterminateComponent (http://127.0.0.1:3000/_next/1508422415649/commons.js:10406:7)
At beginWork (http://127.0.0.1:3000/_next/1508422415649/commons.js:10607:9)
At performUnitOfWork (http://127.0.0.1:3000/_next/1508422415649/commons.js:12579:5)
At workLoop (http://127.0.0.1:3000/_next/1508422415649/commons.js:12688:11)
At callCallback (http://127.0.0.1:3000/_next/1508422415649/commons.js:1305:9)

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

[iamsoorena]

@arunoda
I think It's better to reopen this issue, since in the latest version of Next.js (4.1.2) we still have dependency on strip-ansi which has this piece of code:

I think it's one of the most critical bugs in Next.js since one of the core philosophies of Next.js is to provide server-side-rendering, why? mainly to get indexed by search engines. and since google uses Chrome v41 to crawl websites, all Next.js powered websites have error and they are not fully loaded with google crawlers.

[oliverjam]

Yeah would be nice to re-open this as we just hit it today on Next 4.1.3 (only in dev though).

It was fine yesterday so not sure what happened to trigger this...

[vjpr]

Same here. Please re-open.

[brtstk]

Quick and dirty solution; add as post-build step for your prod bundle. Works for me.

$ find .next/**/*.js -type f -exec sed -i '' -e 's/const /var /g' {} \;

Replaces all const → var inside your bundle. 🔨

[brandonmp]

I think it's one of the most critical bugs in Next.js since one of the core philosophies of Next.js is to provide server-side-rendering, why? mainly to get indexed by search engines. and since google uses Chrome v41 to crawl websites, all Next.js powered websites have error and they are not fully loaded with google crawlers.

This isn't conclusive but FWIW, i don't think this bug is affecting the actual google bot crawler.

zeit.co (which i assume is ~ next@latest) throws the error on pagespeed insights, but in the google cache (which was updated yesterday), everything renders fine.

AFAIK the cache is the source of truth re: 'is it indexed?'

[Jinnified]

next 4 depends on "strip-ansi": "4.0.0", could it be why this issue is re-appearing again?

[i8ramin]

Is there a specific reason to use version 4.0.0? can we just downgrade for compatibility of IE and Google Fetch?

[i8ramin]

What I had to do to finally make it all work:
https://github.com/zeit/next.js/issues/3205#issuecomment-350612939

[alexdevero]

Any progress on this issue?

[mgiraldo]

having this problem also. did someone manage to fix it, even with a workaround? i tried @i8ramin's solution to no avail

[peterhpchen]

Try using babel: https://github.com/babel/babel-loader/issues/171