Support multi-format next.config.{js,cjs,mjs,ts}

[1aron]

Describe the feature you'd like to request

• next.config.js
• next.config.mjs
• next.config.cjs
• next.config.ts

Related

• Support ES module format (ESM) in next.config.js #32239
• Use import() to load next.config.js #29935
• next/lib/find-config does not support ESM config files #34448
• feat: use ESM-CJS interoperable import in find-config #34451
• Add support for "type": "module" in package.json #33637
• Load next.config.mjs as ESM #22153

Describe the solution you'd like

As far as is generally known:

• Cannot import ESM modules in CJS
• Cannot use ESM dynamic import in CJS
• Cannot use CJS dynamic require in ESM
• Cannot import .ts config in .js .cjs .mjs
• Cannot mix .js .cjs .mjs packages

Recently, I encountered the same problem when implementing the compiler of Master CSS, so I created a plugin — cross-import that allows you to import ESM, Typescript modules in the CJS environment at runtime.

The principle is to compile, bundle and create virtual JavaScript modules at runtime through ESBuild, which is fast and formal because it is not hardcoded through fs.

Also, cross-import is not asynchronous like ESM's Dynamic Import, it runs synchronously.

So now Next Team supports multi-format JavaScript modules in a CJS environment almost immediately:

npm i cross-import

import crossImport from 'cross-import'

const configModule = crossImport('next.config.{js,cjs,mjs,ts}')
const config = configModule.default || configModule

By default cross-import is executed in CWD.

Describe alternatives you've considered

I also created a package — techor to handle this kind of tech authoring.

const defaultOptions = {}

class NextJS extends Techor<Options, Config> {
    constructor (
        options: Options
    ) {
        super(defaultOptions, options)
    }
    ...
}

I think this is quite possibly the only solution for different environment JavaScript modules!

[Fredkiss3]

Right now, you can use the formats : next.config.js and next.config.mjs for the other I didn’t test but I suppose you can use them ?
I suspect that the .ts one is not possible because it is directly executed as a node argument without typescript ( something like : node next.config.js ), so it is not compiled before execution.

[1aron]

Right now, you can use the formats : next.config.js and next.config.mjs for the other I didn’t test but I suppose you can use them ? I suspect that the .ts one is not possible because it is directly executed as a node argument without typescript ( something like : node next.config.js ), so it is not compiled before execution.

The code is about 9 lines, you can understand how ts is imported as a module from this context: https://github.com/1aron/utils/blob/main/packages/cross-import/src/index.ts#L18-L26

it('import .ts in .js', () => {
    expect(
        crossImport('./foo.ts', { cwd: __dirname })
    ).toEqual({'bar': 'bar', 'foo': 'foo'})
})

[ondrej-langr]

You can even import things with ts-node like this:

import tsNode from 'ts-node';
// This registers new ts compiler onto node itself which results in valid import of `.ts` files
tsNode.register();
const someFileModule = await import("some-file.ts")

[GabenGar]

Yeah but then you'll have an issue of whatever real-time config transpiler having a different typscript config than nextjs.