Transpiling NextJS for IE 10/11; 'Weakset undefined'

How to support IE 11 by transpiling node_modules code in NextJS

Original answer found in the ziet/nextjs issues thread (view here). Shout out to joaovieira <3

npm install --save-dev babel-polyfill

create a polyfill.js where ever you want it, and inside that file, import the babel-polyfill like so:

import 'babel-polyfill';

Next, if you do not have a next.config.js file, create it at your root directory. Now update your this file to include the following webpack config. Notice how it's using the polyfill file you just made. Full file example:

module.exports = {
  webpack: (config) => {
    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js']) {
        entries['main.js'].unshift('./path_to/polyfills.js'); // <- polyfill here
      }
      return entries;
    };

    return config;
  }
}

Finally, if you don't have a .babelrc file in your project's root directory, create one. Inside it, use the code below that matches the version of babel you're using.

Babel 7

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "useBuiltIns": "usage"
        }
      }
    ]
  ]
}

Babel 6

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "browsers": "defaults"
          },
          "useBuiltIns": true
        }
      }
    ]
  ]
}

That's all I know. I'm not even thinking about IE 10...

Good luck!!