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

Question

I have a NextJS website I'm building and it's great, except that it does not work in IE 10/11 because some code is not being transpiled correctly. I'm really bad with babel and webpack, and have never had to config them myself before. I've been trying to solve by reading online for two days now, and nothing seems to work for me.

The exact error I get is weakSet is not defined, and it is coming from the common.js file.

Here is my .babelrc file, located in the root of my project.

// .babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { 
            "ssr": true, 
            "displayName": true, 
            "preprocess": false 
        }]
    ]
}

my package.json

{
  "name": "bradshouse",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-pose": "^4.0.1",
    "styled-components": "^4.0.2"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
  }
}

The full repo is here if you're interested in launching it yourself. node modules are excluded, so npm install, then npm run build, then npm run start.
https://github.com/TJBlackman/Brads-House

Thanks for the help! Feel free to just link articles and I'll read them thoroughly! Thanks.

Edit: As a quick fix, I added this polyfill script to the of all my pages, and it still did not fix this issue... Wat?!

user_4927236 · Answer

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!!

user_5172890 · Answer

I am using next@9.3 with reflect-metadata, and here is my solution:

/** next.config.js > webpack **/

const pathToPolyfills = './src/polyfills.js'
// Fix [TypeError: Reflect.metadata is not a function] during production build
// Thanks to https://leerob.io/blog/things-ive-learned-building-nextjs-apps#polyfills
// There is an official example as well: https://git.io/JfqUF
const originalEntry = config.entry
config.entry = async () => {
  const entries = await originalEntry()
  Object.keys(entries).forEach(pageBundleEntryJs => {
    let sourceFilesIncluded = entries[pageBundleEntryJs]
    if (!Array.isArray(sourceFilesIncluded)) {
      sourceFilesIncluded = entries[pageBundleEntryJs] = [sourceFilesIncluded]
    }
    if (!sourceFilesIncluded.some(file => file.includes('polyfills'))) {
      sourceFilesIncluded.unshift(pathToPolyfills)
    }
  })
  return entries
}

/** src/polyfills.js **/

// Other polyfills ...

import 'reflect-metadata'

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

2 Answers