next.js: create-next-app: Build Error using `next dev` v14.2 (`ERR_UNSUPPORTED_ESM_URL_SCHEME`)

EDIT: Temporary solution

EDIT: Already fixed in v14.2.1

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/falling-morning-j32gvz

To Reproduce

Create a next project using create-next-app CLI with v14.2
Run in development (next dev)
Error will show up like this:

Current vs. Expected behavior

Currently, when creating an app using create-next-app (default options selected), the build error shows up and throws ERR_UNSUPPORTED_ESM_URL_SCHEME

The new project should work as expected.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 32385
  Available CPU cores: 12
Binaries:
  Node: 21.3.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0 // Latest available version is detected (14.2.0).
  eslint-config-next: 14.2.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CLI (create-next-app)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I believe the issue is specific to Windows and I unfortunately cannot reproduce it on CodeSandbox.

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 14
Comments: 26 (3 by maintainers)

Commits related to this issue

use pathToFileUrl to make esm import()s work with absolute windows paths (#64386) ### What? Fixes #64371 Fixes #63359 Closes PACK-2946 --------- Co-authored-by: Tim Neutkens <tim@timne... — committed to vercel/next.js by sokra 3 months ago
use pathToFileUrl to make esm import()s work with absolute windows paths (#64386) ### What? Fixes #64371 Fixes #63359 Closes PACK-2946 --------- Co-authored-by: Tim Neutkens <tim@timne... — committed to vercel/next.js by sokra 3 months ago

Most upvoted comments

After reading https://github.com/vercel/next.js/issues/63359#issuecomment-2003849511, I think the workaround for now would be to rename postcss.config.mjs to postcss.config.cjs

And then change the export from:

export default config;

to:

module.exports = config;

Works fine as a temporary solution.

+146

verdaderoken on Apr 11, 2024

After reading #63359 (comment), I think the workaround for now would be to rename postcss.config.mjs to postcss.config.cjs

And then change the export from:
export default config;
to:
module.exports = config;
Works fine as a temporary solution.

I did exactly as you said, but I still came across a new error. However, I tried to create a new Next.js app without Tailwind CSS, and then I ran it normally.

PhucNghi176 on Apr 12, 2024

After reading #63359 (comment), I think the workaround for now would be to rename postcss.config.mjs to postcss.config.cjs

And then change the export from:
export default config;
to:
module.exports = config;
Works fine as a temporary solution.

I did the same thing as mentioned in the post , it did work for me thanks 👍 , hope this gets resolved soon

MohammedNayeemE on Apr 12, 2024

Same Hereeeee 😭 I thought I was the only one…

Ahmed-Elgendy25 on Apr 11, 2024

Just cloned the create-next-app as well, experiencing the same issue! verdaderoken suggestion worked for me as well.

stephenrt42 on Apr 12, 2024

Hey everyone, in case you missed it @sokra is investigating a fix here: https://github.com/vercel/next.js/pull/64386.

timneutkens on Apr 12, 2024

Issue still exists ?

mld1994 on Apr 13, 2024

After reading #63359 (comment), I think the workaround for now would be to rename postcss.config.mjs to postcss.config.cjs

And then change the export from:
export default config;
to:
module.exports = config;
Works fine as a temporary solution.

Worked perfectly for me. Thanks a lot!

IconicMayukh on Apr 12, 2024

update Node.js v21.7.3

HOTLancerX on Apr 12, 2024

faced this problem 10 min ago while creating a new project. @verdaderoken comment fixed it! hats off to you, mate

AhmedMohammedMostafa on Apr 12, 2024

el problemas es cuando creas un proyecto instalando tailwind, yo cree un nuevo proyecto sin tailwind y levanto normal

arismtj on Apr 12, 2024

After reading #63359 (comment), I think the workaround for now would be to rename postcss.config.mjs to postcss.config.cjs And then change the export from:
export default config;
to:
module.exports = config;
Works fine as a temporary solution.
I did exactly as you said, but I still came across a new error. However, I tried to create a new Next.js app without Tailwind CSS, and then I ran it normally.

this fix works when running next dev but the problem still exists when trying to use turbo next dev --turbo .

riad-azz on Apr 12, 2024

Right; so your import is from "next/font/google", not "next/font/local". I guess it’s an issue that has to be solved within Next.js. Hope it won’t take to long you folks on Windows will be unblocked!

kachkaev on Apr 11, 2024

@kachkaev thanks.

I haven’t made any changes to the code. This is the generated layout.tsx. I don’t think it’s related to the font.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

I think it only occurs on Windows.

Even if I remove the font loading, the error will still persists for globals.css

verdaderoken on Apr 12, 2024