next.js: Error in ie11 in the dev env after 10.0.5 -> 10.0.6 upgrade. Nextjs with custom server.

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

14.14.0

What browser are you using?

ie11, chrome

What operating system are you using?

win7, win10, linux mint

How are you deploying your application?

next({ dev }).prepare()

Describe the Bug

After 10.0.5 -> 10.0.6 upgrade I get an error in the dev env: “Error was not caught SyntaxError: invalid character”.

With next 10.0.5 there is no error in ie11.

Expected Behavior

Work without errors.

To Reproduce

I use custom webpack config in next.config.js:

webpack: (config) => {
    config.entry = async () => {
      const entries = await originalEntry();
      if (
        entries["main.js"] && !entries["main.js"].includes("./polyfills.js")
      ) {
        entries["main.js"].unshift("./polyfills.js");
      }
      return entries;
   };
    config.module.rules.push({
      test: /\.js$/,
      use:
      { loader: "babel-loader",
        options: {
          presets: [[
              "@babel/preset-env", {
                corejs: 3,
                useBuiltIns: "entry",
                targets: {
                  browsers: ["defaults"],
                }},
            ]],
          exclude: [/node_modules/],
        }},
    });
    return config;
  }

polyfills.js:

import "@webcomponents/shadydom";

babel.config.json:

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

ie_err_1 ie_err_2

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 12
Comments: 15 (4 by maintainers)

Commits related to this issue

Fix IE11 incompatibility due to string litterals (#23784) Fixes #22270 ## Bug - [X] Related issues linked using `fixes #number` - [ ] Integration tests added — committed to vercel/next.js by malixsys 3 years ago
Fix IE11 incompatibility due to string litterals (#23784) Fixes #22270 ## Bug - [X] Related issues linked using `fixes #number` - [ ] Integration tests added — committed to SokratisVidros/next.js by malixsys 3 years ago

Most upvoted comments

Yeah this is still present and breaking IE. Looks like the change happened here: 55b8502

It seems the fix would be to remove the template literals from this file https://github.com/vercel/next.js/blob/master/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js#L157 and replace with string concatenation. Or run these files through the same polyfilling that other files get.

Submitted https://github.com/vercel/next.js/pull/23784

malixsys on Apr 7, 2021

To make it work with IE11 in 10.0.5, had to add this to next.config.js:

const withMDX = require('@next/mdx')();
const withTM = require('next-transpile-modules')(['ansi-regex', 'debug']);

const POLYFILLS = './src/client/polyfills.js';
module.exports = withTM(
  withMDX( 
      webpack: (config /* , { isServer, buildId, dev }*/) => {
        const originalEntry = config.entry;
        config.entry = async () => {
          const entries = await originalEntry();

          const mainJs = entries['main.js'];
          if (mainJs && !mainJs.includes(POLYFILLS)) {
            mainJs.unshift(POLYFILLS);
          }

          return entries;
        };
        return config;
      }
    }
  )
);

Later versions have “untranspilable” string litterals in ./node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js 🤷🏽‍♂️

malixsys on Feb 19, 2021

This bug was not present in version 10.0.5. It appeared with the update to version 10.0.6.

m-kon on Feb 19, 2021

Still present in 10.0.9. We’d really like to move forward since 10.0.5 imports a vulnerability in color-string 1.5.5.

kconner on Mar 23, 2021

PROBLEM_FILE="node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js"
npx babel --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-shorthand-properties $PROBLEM_FILE -o $PROBLEM_FILE

Local development on nextjs 10.0.6 and higher works without any errors with something like this. Can it be done on nextjs side?

AvroraPolnareff on Feb 26, 2021

Present in 10.1.3.

kconner on Apr 6, 2021

Present in 10.1.1.

kconner on Mar 29, 2021

Present in 10.1.3.

devzhen on Apr 14, 2021

Yeah this is still present and breaking IE. Looks like the change happened here: https://github.com/vercel/next.js/commit/55b8502dd02574a719090a84c1e7cf89f827d28c

It seems the fix would be to remove the template literals from this file https://github.com/vercel/next.js/blob/master/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js#L157 and replace with string concatenation. Or run these files through the same polyfilling that other files get.

jasonwilliams on Apr 7, 2021

I’m also seeing this bug when trying to develop in IE11. I can confirm that 10.0.5 still works.

nickrttn on Feb 26, 2021