Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
urban opened this issue Aug 10, 2017 · 27 comments
Closed

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

urban opened this issue Aug 10, 2017 · 27 comments

Comments

@urban
Copy link

urban commented Aug 10, 2017

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
Copy link
Contributor

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
Copy link
Author

urban commented Aug 10, 2017

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:

screen shot 2017-08-09 at 9 33 32 pm

screen shot 2017-08-09 at 9 40 08 pm

@jaydenseric
Copy link
Contributor

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
Copy link
Author

urban commented Aug 10, 2017

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
Copy link
Author

urban commented Aug 10, 2017

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
Copy link
Contributor

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
Copy link

mettin commented Aug 11, 2017

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

@cschroeter
Copy link

Same issue here

@pencilcheck
Copy link
Contributor

pencilcheck commented Aug 18, 2017

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
Copy link
Contributor

cheshirecode commented Aug 21, 2017

@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
Copy link
Member

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

@jwillem
Copy link
Contributor

jwillem commented Aug 28, 2017

I've submitted a PR to this. #2860

@jwillem
Copy link
Contributor

jwillem commented Aug 30, 2017

could be closed. fixed in version 3.1.0.

@arunoda
Copy link
Contributor

arunoda commented Aug 31, 2017

Thanks for the PR

@arunoda arunoda closed this as completed Aug 31, 2017
@cheshirecode
Copy link
Contributor

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
Copy link

Lizhooh commented Oct 19, 2017

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
Copy link

@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:

image

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
Copy link

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

screen shot 2017-11-01 at 16 08 23

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

@vjpr
Copy link

vjpr commented Nov 9, 2017

Same here. Please re-open.

@bartsitek
Copy link

bartsitek commented Nov 14, 2017

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 constvar inside your bundle. 🔨

@brandonmp
Copy link
Contributor

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
Copy link

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

@i8ramin
Copy link
Contributor

i8ramin commented Dec 6, 2017

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

i8ramin added a commit to i8ramin/next.js that referenced this issue Dec 6, 2017
timneutkens pushed a commit that referenced this issue Dec 8, 2017
timneutkens pushed a commit that referenced this issue Dec 8, 2017
A few discussions:
#2747
#3126
# Conflicts:
#	package.json
@i8ramin
Copy link
Contributor

i8ramin commented Dec 11, 2017

What I had to do to finally make it all work:
#3205 (comment)

@alexdevero
Copy link

Any progress on this issue?

@mgiraldo
Copy link

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

@peterhpchen
Copy link

Try using babel: babel/babel-loader#171

@lock lock bot locked as resolved and limited conversation to collaborators Mar 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests