CODEWITHSUNDEEP
next.js
JonLuca
JonLuca

Reputation: 919

Disable es5 transpilation while developing in nextjs

Is there a way to disable transpilation of es5 code (such as async functions) while in next dev?

Setting the babel preset-env does not work, and this previous answer no longer works either.

Setting the browserlist target within package.json still transpiles the code as well

Upvotes: 6

Views: 1024

Answers (1)

JonLuca
JonLuca

Reputation: 919

As of Jan 2023 I found a few flags that help get you most of the way there.

const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
  webpack: (config, { dev }) => {
    if (dev && Array.isArray(config.target) && config.target.includes('web')) {
      config.optimization.minimize = false;
      delete config.optimization.minimizer;
      config.target = ["web", "es2020"];
    }
    return config;
  }
};

if (!isProd) {
  nextConfig.experimental = {
    legacyBrowsers: false,
  };
}

module.exports = nextConfig;

This will disable legacy browser support and use your browser list for swc, and then also changes the targets for webpack. Doesn't completely remove transpilation but it's way better than the default

Also, nextjs now supports browserslist in your package.json - source

Adding the following key to your package.json will enable most features by default:

{
  "browserslist": [
    "chrome 109"
  ]
}

Upvotes: 5

Related Questions