SCRIPT1002: Syntax error in Next JS website in IE11 (getSession)

Question

I am new to NextJS but have managed to make a website that works fine in all browsers except IE11. The issues in the console read....

SCRIPT1002: Syntax error
_app.js (20481,19)

Which is this _getSession line //HERE!!!

var __NEXTAUTH = {
  baseUrl: (0, _parseUrl.default)(process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
  basePath: (0, _parseUrl.default)(process.env.NEXTAUTH_URL).basePath,
  keepAlive: 0,
  clientMaxAge: 0,
  _clientLastSync: 0,
  _clientSyncTimer: null,
  _eventListenersAdded: false,
  _clientSession: undefined,
  _clientId: Math.random().toString(36).substring(2) + Date.now().toString(36),
  _getSession: () => {}  //HERE!!!
};

imported from import { getSession } from 'next-auth/client'

There a second error:

SCRIPT1002: Syntax error
index.js (44675,30)

Which is this line var isHTMLElement = (value) => value instanceof HTMLElement;

Any ideas how I can find the issue to these errors or has anyone come across them before? Thanks

Answer 1

If we try to see the problematic line of code then we can notice that it contains => Arrow functions. Arrow functions not supported in the IE browser.

You need to convert it into a normal function to make it work in the IE browser.

If there are multiple occurrences of this function then you can try to use BabelJS to transpile the ES6 code to the ES5 code. This can be an easy fix for the issue.

Here are some reference threads that may give you some additional information.

1. Why doesn't this arrow function work in IE 11?

2. Syntax error in IE using ES6 arrow functions