next-turbopack-nodenext

Adds module: NodeNext support to Turbopack in Next.js.

tl;dr

• Install by executing npm install next-turbopack-nodenext or yarn add next-turbopack-nodenext --dev.
• Import by adding import withNodeNext from 'next-turbopack-nodenext'.
• Use it by wrapping your config export default withNodeNext(nextConfig).

What's this all about?

Suppose you have two TypeScript files:

// index.ts
import { foo } from './foo.js';

// foo.ts
export const foo = 'foo';

Note how despite the fact that foo.ts is a TypeScript file, it is imported, somewhat counterintuitively, as a JavaScript file. That's because after it is compiled, it will be a JavaScript file.

This way of importing files is the only way to ensure your code is interoperable with both Node.js and the browser. It also works with Vite, esbuild, and many other tools. However, it does not work out-of-the-box with Next.js:

 ⨯ ./app/(dashboard)/layout.tsx:6:1
Module not found: Can't resolve './Header.js'

You can use experimental.extensionAlias option to tell the bundler to also look for .ts and .tsx files when importing .js files.

However, this option is not available in Turbopack yet. next-turbopack-nodenext patches this missing feature in Turbopack by resolving .js imports for it and passing the resolved paths to the bundler using another option, experimental.turbo.resolveAlias.

If you previously provided experimental.extensionAlias in your Next.js config, next-turbopack-nodenext will respect it and use it to resolve .js imports. If not, it will provide its own default configuration (resolving imports to .ts, .tsx, .js, and .jsx files, in that order).

License

The MIT License.

Author

Wojciech Maj