How to make next.js build compatible with ES5 (chrome 44)?

[MartinPavlik]

Summary

Hello,

is there some way how to make output JS files that are built by Next.js 13.5.0 using SWC compatible with Chrome 44? I would need to replace spread operator with object.assign, replace arrow functions with standard function definitions etc.

Is there some way how to do this using swc? For example running another step after Next.js build and transpile the files again using SWC with .swrc file?

Additional information

I also tried to use babel for this, but I get this error on build while using babelrc file:

Error: Nesting detected at 80:13. Unfortunately nesting is not supported by styled-jsx.
    at Function.disableNestingPlugin

the .babelrc file looks like this:

{
  "presets": [
    "next/babel",
    ["@babel/preset-env",
    {
      "useBuiltIns": "usage",
      "corejs": "2",
      "targets": {
        "android": "44"
      },
      "exclude": [
      ],
      }]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
}

Another thing I've tried is setting the package.json property browserlist while using SWC:

  "browserslist": [
    "chrome > 44",
    "android > 44"
  ]

And I put into the next.config.js:

transpilePackages: [
  'next',
  // and all other packages from dependencies of my project
]

But it looks like it had no effect / or it ignored the browserlist, since the it left arrow functions in the output, for example: whenEntrypoint: r => withFuture(r, n),.

Example

No response

Thank you for any help!

[icyJoseph]

Have you looked into this thread? #10440

[MartinPavlik]

I just read and it did not help much. It seems like the thread is about next 9 and chrome 58, I'm trying to get support for much older version of chrome with which nextjs is not compatible.

I have tried to include all the packages in the transpilePackages but it did not help. Now I'm trying another approach to run swc on the build directory, which produces ES5 compatible code, but has some errors during runtime 😢

[icyJoseph]

How is not compatible still? What features are missing there?

I managed to get arrow functions into regular functions, but what else is failing? I tested with object spread, which is a chrome 60 thing, and it seems to transpiled correctly.