Edge 18 (Object.fromEntries) not supported even with correct polyfills

[FBosler]

Bug report

using the following .babel.rc leads to a build that should in theory support edge 18.

{
    "presets": [
        [
            "next/babel",
            {
                "preset-env": {
                    "targets": "> 0.25%"
                }
            }
        ]
    ],
    "plugins": [
        ["styled-components", { "ssr": true }],
        [
            "module-resolver",
            {
                "root": ["."],
                "alias": {
                    "@/Components": "components",
                   ...
                    "@/Functions": "components/Concepts/Functions"
                }
            }
        ]
    ]
}

This can be confirmed by running npx browserslist "> 0.25%". However, when testing live via browserstack (as its pretty hard to actually install edge 18), it seems like this is not the case, as the following bug pops up:

TypeError
Object doesn't support property or method 'fromEntries'

To Reproduce

Unfortunately, it's pretty hard for me to reliably reproduce the bug in a minimal example as I can't even run edge 18 locally. However, navigating to https://staging-viteach.com/concepts/rational%20numbers with edge 18 AND logging in - no validation required - will produce the bug.

Expected behavior

Would think that the config creates the correct polyfill.

Screenshots

System information

• OS: Windows 10 (runtime)
• Browser (if applies) edge 18 (runtime)
• Version of Next.js: 9.4.4 (buildtime)
• Version of Node.js: 13.13 (buildtime)

[eezing]

@FBosler stacktrace available?

[FBosler]

@FBosler stacktrace available?

Sorry, browserstack won't let me copy stuff, seems like its sandboxed. Not sure if the screenshot helps though. Thanks for looking into this.

[FBosler]

Any news on this? Or is there a way to monkey patch this? I am encountering a surprising large number of errors for this.

[samovertonjr]

@FBosler the fix might be to npm install object.fromentriesthis is a polyfill. I'll try and do a fix in next but idk how polyfills are handled yet. This link might help explain it more microsoft/TypeScript#32803

[FBosler]

@samovertonjr makes sense! Thx, I'll have a look.

[eezing]

@FBosler It could be caused by a non-transpiled NPM module. I'm using a few NPM modules that aren't transpiled, next-transpile-modules solved my problem.

[tkrotoff]

Check https://nextjs.org/docs/basic-features/supported-browsers-features#custom-polyfills

Create src/polyfills.js:

// https://github.com/vercel/next.js/pull/15772#discussion_r463984612
import 'core-js/features/object/from-entries';

and import it inside your custom src/pages/_app.js:

// https://nextjs.org/docs/basic-features/supported-browsers-features#custom-polyfills
import '../polyfills';

function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  );
}

export default App;

Why do we have to do this? Because Next.js does not include all polyfills. Instead @timneutkens decided to include only the most common ones (#15772 (comment), #11714) to avoid increasing the bundle size.

Be ready for hours of IE/old Edge debugging in a VM to understand what fails (can be hard considering how basic and slow IE dev tools are).

In a regular React app without Next.js, you would simply import 'core-js' and be done: no worries about a npm dependency update that might introduce the use of a basic JS feature not polyfilled by Next.js.

FYI Object.fromEntries() core-js polyfill is 5 lines of code.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.