Next.js Discord

Discord Forum

Output ES6 instead of CJS for client bundles

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I have an application that needs to share and consume a large ESM based external dependency, think an esm.sh/dependency. In order to import this ESM based URL, the client-side code needs to be outputted as ESM/module so it can correctly import() the URL. Now you can do this in webpack by enabling experiments.outputModule=true, and setting the output.libraryTarget:'module' in your webpack config.

Unfortunately this doesn't work with Nextjs as HMR (hot module reload) doesn't support ESM output yet, and there is no way to turn off HMR through any of the config options.

HookWebpackError: HMR is not implemented for module chunk format yet
at tryRunOrWebpackError

The experimental.urlImports unfortunately doesn't work for my usecase either as it's just downloading the ES6 bundle that you import, and then converts it to cjs.

Is there any way that ES6 can be outputted client-side?

0 Replies