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

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 numbers 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)

[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 (https://github.com/vercel/next.js/pull/15772#discussion_r463984612, https://github.com/vercel/next.js/issues/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[bot]]

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.