Can I use esnext as target for my bundle?
#JS bundle target
dusk cairn
trail scaffoldBOT
Hi @dusk cairn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can use esnext as a target for your bundle. However, it's important to note that as of Next.js 13, the framework targets browsers that support ECMAScript Modules (ESM) by default. This means that the transpilation target is set to a modern JavaScript version that supports ESM. You can configure this using a Browserslist configuration source (https://github.com/vercel/next.js/issues/43560).
In terms of TypeScript configuration, Next.js has been known to set the module option to esnext for dynamic import() support source (https://github.com/vercel/next.js/issues/45617). However, if you're using "type": "module" in your package.json, the correct value for module is node16, not esnext.
Please note that the target option in next.config.js has been deprecated in favor of built-in support for tracing what dependencies are needed to run a page source (https://nextjs.org/docs/pages/building-your-application/upgrading/version-12#target-option-deprecated).
If you want to override the default transpilation target, you might need to reach into the Next.js internals to override the SWC configuration, as shown in this source (https://github.com/vercel/next.js/issues/43560). However, this is not recommended as it might lead to unexpected behavior.
const swcOptions = require('next/dist/build/swc/options')
const { getLoaderSWCOptions } = swcOptions
swcOptions.getLoaderSWCOptions = function (...args) {
const result = getLoaderSWCOptions(...args)
result.jsc.target = 'es2022'
return result
}