Next.js 14.2.0 freshly created app throws ERR_UNSUPPORTED_ESM_URL_SCHEME error when navigating to localhost:3000

Question

This is my error after running npx create-next-app@latest:

Failed to compile

Next.js (14.2.0)
src\app\layout.js
An error occurred in `next/font`.

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:236:11)
    at defaultLoad (node:internal/modules/esm/load:128:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:409:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at #createModuleJob (node:internal/modules/esm/loader:303:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:260:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:241:17)
    at async ModuleLoader.import (node:internal/modules/esm/loader:328:23)

I tried to fix it by running npx @next/codemod built-in-next-font. It didn't solve the error. How do I fix it?

Answer 1

The error is related to Next.js v14.2.0. There are two options to solve the error.

OPTION 1: Temporary solution until a new Next.js version is released (source)

Rename postcss.config.mjs to postcss.config.cjs.

Then change the export from this...

export default config;

...to this.

module.exports = config;

OPTION 2: Downgrade Next.js to v14.1.0

Downgrading should also solve the error.