Next.js: IE11 errors on main.js because of `const` in `for (const ...`

Created on 11 May 2018  路  10Comments  路  Source: vercel/next.js

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Next deployments should work in IE11.

Current Behavior

My Next deployment does not work in IE11.

The error is

SCRIPT1053: Const must be initialized
File: main.s, Line: 1, Column 503674

I looked at that place in main.js, which has this snippet--

... for(const e of Object.keys(o)) ...

I looked online, and apparently IE11 doesn't allow const or let in for loops, like for (const var ....

I removed all these for (const and for (let forms from my code and redeployed, but got the same result. I believe it's because there are 9 modules in my node_modules that use the for (const ... form. I can't replace these modules.

Is there some way to have next build the code and convert these for (const and for (let forms to for (var or for (... so I can support IE11?

I am using Typescript, but I don't think that should make a difference.

Steps to Reproduce (for bugs)

Deploy any code with a for (const loop in it.

Your Environment


| Tech | Version |
|---------|---------|
| next | 5.1.0 |
| node | 9.8.0 |
| browser | IE version 11.0.9600.18860 |

Most helpful comment

@kedarguy @tashburn
i add babel polyfill to my project and fixed all.

This my setup;

.babelrc

"presets": [
        [
            "next/babel",
            {
                "preset-env": {
                    "targets": {
                        "browsers": [
                            "IE >= 11"
                        ]
                    },
                    "useBuiltIns": "entry"
                }
            }
        ]
    ]

pages/_document.js

import '@babel/polyfill'

next.config.js

webpack: (config, { dev, isServer }) => {
        const originalEntry = config.entry;
    config.entry = async () => {
    const entries = await originalEntry()
    if (entries['main.js'].indexOf("@babel/polyfill") === -1) {
        entries['main.js'].unshift("@babel/polyfill")
    }
    return entries
    }
});

npm i --save @babel/polyfill

All 10 comments

@tashburn Try with [email protected]. It should be fine.

Going to close based on @oliviertassinari's comment.

It'd be tremendously helpful if you provide full steps to reproduce when creating issues, otherwise it takes more time than it should to check out particular issues. Thanks 馃檹

@tashburn Hi, I have same problem with external dependency. Did you solved this?

@omeraplak I solved it by replacing const in for loops with var.

let instead of var might also work.

@tashburn
How did you change external dependencies? Did you do a fork?

@omeraplak
I believe I got lucky with dependencies. Only a few small dependencies had const in their for loops. I just copied the source of those packages into my project as utility code, and changed their for loops manually.

Hey,

I am getting the same issue with

"next": "^6.1.1", ie: 11.0.9600.19080

SCRIPT1053: Const must be initialized

File: main-18c1cd8062c40c5f93d6.js, Line: 1, Column: 242398

const e of Object.keys(o))o[e].closeRe=new

Is there a known fix for this issue?

@kedarguy @tashburn
i add babel polyfill to my project and fixed all.

This my setup;

.babelrc

"presets": [
        [
            "next/babel",
            {
                "preset-env": {
                    "targets": {
                        "browsers": [
                            "IE >= 11"
                        ]
                    },
                    "useBuiltIns": "entry"
                }
            }
        ]
    ]

pages/_document.js

import '@babel/polyfill'

next.config.js

webpack: (config, { dev, isServer }) => {
        const originalEntry = config.entry;
    config.entry = async () => {
    const entries = await originalEntry()
    if (entries['main.js'].indexOf("@babel/polyfill") === -1) {
        entries['main.js'].unshift("@babel/polyfill")
    }
    return entries
    }
});

npm i --save @babel/polyfill

@omeraplak Thank you for your answer. Where does entries come from? It fails because entries does not exists.

@rap2hpoutre hi, I was updated

Was this page helpful?
0 / 5 - 0 ratings