Next.js 14.0.3 doesn't work for IE 11 right out of the box (syntax error)

[Andrew-Dyachenko]

Link to the code that reproduces this issue

https://github.com/Andrew-Dyachenko/nextjs-14.0.3-ie11

To Reproduce

1. Create a new Next.js 14.0.3 project with npx create-next-app@14.0.3

andrew@MacBook-Pro-Andrey Sites % npx create-next-app@14.0.3
✔ What is your project named? … nextjs-14.0.3-ie11
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/andrew/Sites/nextjs-14.0.3-ie11.

Using npm.

Initializing project with template: app 

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

added 280 packages, and audited 281 packages in 19s

106 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created nextjs-14.0.3-ie11 at /Users/andrew/Sites/nextjs-14.0.3-ie11

andrew@MacBook-Pro-Andrey Sites %

3. Build the project with npm run build

   
   andrew@MacBook-Pro-Andrey nextjs-14.0.3-ie11 % npm run build

nextjs-14.0.3-ie11@0.1.0 build next build

▲ Next.js 14.0.3

✓ Creating an optimized production build
✓ Compiled successfully ✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5) ✓ Collecting build traces
✓ Finalizing page optimization

Route (app) Size First Load JS ┌ ○ / 5.33 kB 89.2 kB └ ○ /_not-found 876 B 84.8 kB

• First Load JS shared by all 83.9 kB ├ chunks/472-b67f79dbdd2c1fe1.js 28.7 kB ├ chunks/fd9d1056-7b52db27cfdaff1f.js 53.3 kB ├ chunks/main-app-bc8728f4bcd3b9df.js 219 B └ chunks/webpack-e3c6517d4ab8d680.js 1.68 kB

○ (Static) prerendered as static content

andrew@MacBook-Pro-Andrey nextjs-14.0.3-ie11 %

4. Start the project with `npm run start`
```bash
andrew@MacBook-Pro-Andrey nextjs-14.0.3-ie11 % npm run start

> nextjs-14.0.3-ie11@0.1.0 start
> next start

   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000

 ✓ Ready in 358ms

5. Open the project in the http://localhost:3000 link in the Internet Explorer 11. If you are using Windows in VirtualBox, try out the http://10.0.2.2:3000/ link to open it

6. You will see an syntax error in the Internet Explorer 11 console, which says - IE 11 doesn't know the new Template literals from ES6 JavaScript syntax. For example:

   m=`(?:src/)?${g}`

   

Current vs. Expected behavior

Currently there is at least one syntax error in the IE 11

vs

Expected behavior is like on the screenshot below from Chrome, no errors in the console is expected

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Oct  4 23:55:28 PDT 2023; root:xnu-8020.240.18.704.15~1/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.18
  pnpm: 8.11.0
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

warn  - Latest canary version not detected, detected: "14.0.3", newest: "14.0.4-canary.16".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

SWC transpilation

Additional context

I didn't deploy the project yet. Only at the local. It just does not work out of the box for IE 11 due the some parts of ES6 Template literals syntax, which should not be in the final build.

I added the "browserslist" to the package.json:

{
  "name": "nextjs-14.0.3-ie11",
  "version": "0.1.0",
  "browserslist": ["since 2017, ie >= 10"],
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.4-canary.16",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "typescript": "^5"
  }
}

And I have also tried the canary version of the Next.js. It did't help:

andrew@MacBook-Pro-Andrey nextjs-14.0.3-ie11 % npx next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Oct  4 23:55:28 PDT 2023; root:xnu-8020.240.18.704.15~1/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.18
  pnpm: 8.11.0
Relevant Packages:
  next: 14.0.4-canary.16
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

andrew@MacBook-Pro-Andrey nextjs-14.0.3-ie11 

[pawelblaszczyk5]

The browser support with Next.js is described here - https://nextjs.org/docs/architecture/supported-browsers Next.js doesn't support IE11 deliberately afaik and if you need to support it, you'd need to add specific polyfills etc., by yourself.

[Andrew-Dyachenko]

@pawelblaszczyk5 JavaScript Template literals (``) which occur an syntax error in that case can not be fixed with polyfills. It can be fixed with transpilation to ES5 only.

If it so, why does the documentation says that it requires to add polyfills to support IE 11 when it is not true?

[pawelblaszczyk5]

@pawelblaszczyk5 JavaScript Template literals (``) which occur an syntax error in that case can not be fixed with polyfills. It can be fixed with transpilation to ES5 only.

If it so, why does the documentation says that it requires to add polyfills to support IE 11 when it is not true?

It requires adding polyfills (because template literals is just tip of the iceberg for ie11), but that’s not the only required step 😄 I agree the documentation here could be clearer but isn’t falsy.

It’d be nice to check whether IE11 support is possible at all with additional steps and add them to examples or something.

[Andrew-Dyachenko]

@pawelblaszczyk5 JavaScript Template literals (``) which occur an syntax error in that case can not be fixed with polyfills. It can be fixed with transpilation to ES5 only. If it so, why does the documentation says that it requires to add polyfills to support IE 11 when it is not true?

It requires adding polyfills (because template literals is just tip of the iceberg for ie11), but that’s not the only required step 😄 I agree the documentation here could be clearer but isn’t falsy.

It’d be nice to check whether IE11 support is possible at all with additional steps and add them to examples or something.

You're right, this is just the tip of the iceberg, and this is the first syntax error that caused IE 11 to crash. It would be great if it were possible to achieve the desired transpilation using SWC instead of Babel Meanwhile React 18 is still supports IE9+

[Andrew-Dyachenko]

@pawelblaszczyk5 I have tested the starter page of the Next.js 12.3.4 version with IE 11 and it suddenly works, there are no syntax errors (ES6 code) in the Internet Explorer console right out from the box, Unlike the Next.js 14.0.3, which is have syntax errors. (which means it has ES6 syntax, which IE 11 only partially understands).

[Andrew-Dyachenko]

But starting from the Next.js 13, it doesn't work. (tested in 13.5.6)

[Andrew-Dyachenko]

"Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration."

Supported-browsers-and-features (Next.js 12.3.4)

[jimjamdev]

Was this a bad dream?

[timneutkens]

You can configure browserslist but we can't make guarantees that all code will be passed through it because i.e. node_modules ship modern code nowadays too.

Have a look at these docs: https://nextjs.org/docs/architecture/supported-browsers#browserslist

As pointed out here https://github.com/vercel/next.js/issues/58905#issuecomment-1826394403 the default does not support IE11, it's end-of-life and generally considered to be a big risk to still be using it.

[Andrew-Dyachenko]

Was this a bad dream?

Nope. IE 10-11 actually is not so bad browser, it has many modern features like CSS grid layouts, and many people in the world may still have old computers and be compelled users of it.

[Andrew-Dyachenko]

You can configure browserslist but we can't make guarantees that all code will be passed through it because i.e. node_modules ship modern code nowadays too.

Have a look at these docs: https://nextjs.org/docs/architecture/supported-browsers#browserslist

As pointed out here https://github.com/vercel/next.js/issues/58905#issuecomment-1826394403 the default does not support IE11, it's end-of-life and generally considered to be a big risk to still be using it.

I think the Next.js 12.3.4 is the answer for those who are looking for support IE 11. Please note what the output JS code will work at the IE 11 only after npm run build && npm run start but not after npm run dev

[github-actions[bot]]

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