Allow top-level ESM usage with Next projects

[JacobLey]

Describe the feature you'd like to request

NextJS currently requires code be executed as CommonJS.
Packages in node_modules do this automagically with custom package.json that will declare "type":"commonjs" or omit the type (and default to commonjs)

Code in the .next directory does not have this luxury, and is stuck using the root packages type. And because all code is transpiled to commonjs, that forces to top-level package to also be commonjs.

Describe the solution you'd like

The best solution to me is simply writing a package.json in the .next directory with the content { "type": "commonjs" }

That allows NextJS to do everything with CommonJS, while simultaneously freeing up the root package to use whatever type they prefer.

Even if they are already using commonjs the new package.json is at the least a NOOP

Describe alternatives you've considered

Change transpiled code to matched the package's type.

This sounds like a lot more work, and probably isn't feasible for use cases like hot reloading, which the current solution requires usage of things like require.cache, which do not yet have similar solutions in an ESM environment.

[JacobLey]

I currently get around this personally by using a custom next.config.js with contents like:

'use strict';

const fs = require('fs');
const Path = require('path');

let wrotePackageJson = false;

module.exports = {
    webpack: defaultConfig => {

        if (!wrotePackageJson) {
            fs.mkdirSync(Path.join(opts.dir, '.next'), { recursive: true });
            fs.writeFileSync(Path.join(opts.dir, '.next/package.json'), '{ "type": "commonjs" } ');
            wrotePackageJson = true;
        }
        return defaultConfig;
    },
};

Which actually works for now, but overall feels hacky and is depending on timing that is not guaranteed by NextJS

[kachkaev]

Related:

• Issue with backend-side ES6 imports with "type":"module" with an express/nextjs setup #24334
• RFC: Change default JS/CSS output to target modern browsers #33227

[kachkaev]

Potential fix:

• Add support for "type": "module" in package.json #33637

[kachkaev]

↑ It seems to work 🎉

[mattxyzeth]

opts is not defined.

[mattxyzeth]

oh, it's from the second arg to webpack.