next.js: nextjs 13.4.13 is not transpiling code to browser old versions even with browserslist option in package.json

I also noticed an extremely strange effect. If I remove browserslist from package.json (I think that the default settings specified in the documentation should be used), then in the chunk file “.next\static\chunks\app_not-found-[hash].js” in default next.js 14 project I see let variables. If I add browserslist with “last 2 Chrome versions”, then in the same chunk I see var variables 👀. In general, there is a feeling that no matter what target you set in browserslist and no matter what experimental settings you use (for example, from this issue - https://github.com/vercel/next.js/issues/12557), the size of the client bundle does not change in any way (no difference is observed in either the CLI report after the ‘build’ command or in the ‘next/bundle-analyzer’ report. sometimes by 1-2 kb, but even then rarely). It’s quite a frustrating experience. I don’t want to sound rude (and I apologize if it sounds like that), but I see only 2 possible options here:

1. I don’t understand how this should work in complex systems like Next.js
2. We really have a problem with the target for the final bundle and tree-shaking, and judging by the number of issues and comments inside - this is a long-standing problem that for some reason is not being solved or does not receive enough attention from Next.js team.

@woshiqiang1 The easiest way to find with package it was is: next.config.js

module.exports = {
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
}

Sometimes it might be a sub dependency of a dependency. When you do like that you still have the comments left with package names and discovered that sub packages contained ES6 code. Than I just added them too.

I got this working for both babel and swc. Don’t forget to set the browserslist in package.json.

I also ran into issues after upgrading to Next 13.5.2, the build would generate non-ES5 syntax (that I check with the es-check package es-check es5 '.next/static/chunks/main-*.js')

I also found that the output chunk contained some Next.js router code that had let.

I also fixed it by adding next to my transpilePackages config.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['next'],
}
 
module.exports = nextConfig

@EloB Thanks I try the way you said above and it works !! but it’s really not a very elegant and convenient way hope Next.js optimize this DX someday.

hey @EloB I tried adding next in the transpile packages option and it worked, however not sure if this is a clean solution 🤔 https://github.com/yanv1991/test-2017/blob/32bb16a17fff9e12b488b33dbad48b18a9bf0f88/next.config.js#L13

@EloB yes the repo that I posted here is a app generated using the next-create-app CLI, without any dependency and the error looks like is inside nextjs core