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

verdaderoken · 2024-04-11T22:46:05Z

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.

The text was updated successfully, but these errors were encountered:

Ahmed-Elgendy25 · 2024-04-11T22:56:58Z

Same Hereeeee 😭
I thought I was the only one...

kachkaev · 2024-04-11T23:33:19Z

How does your font loading look like? I mean what do you have instead of this line from docs?

// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })

Random suggestion (based on zero knowledge of what you’ve actually got):

- const myFont = localFont({ src: "./my-font.woff2" })
+ const myFont = localFont({ src: new URL("./my-font.woff2", import.meta.url).toString() })

I haven’t tested it – my local fonts work OK on mac with pnpm dev --turbo on Next 14.2.0.

kachkaev · 2024-04-11T23:45:43Z

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!

verdaderoken · 2024-04-11T23:57:23Z

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.

stephenrt42 · 2024-04-12T00:37:51Z

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

AhmedMohammedMostafa · 2024-04-12T01:54:00Z

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

PhucNghi176 · 2024-04-12T05:10:14Z

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.

chk7964 · 2024-04-12T06:18:26Z

I am also getting error in global css. I am using windows.
This error only in turbo mode.

riad-azz · 2024-04-12T06:26:04Z

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 .

Azoonex · 2024-04-12T09:05:24Z

There is no next version 14 yet
You can from
use npx create-next-app@14.1.0

HOTLancerX · 2024-04-12T09:47:21Z

update Node.js v21.7.3

albin-baby-2002 · 2024-04-12T09:49:14Z

There is no next version 14 yet You can from use npx create-next-app@14.1.0

yes 14.1.0 don't have this issue

MohammedNayeemE · 2024-04-12T13:42:01Z

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

IconicMayukh · 2024-04-12T13:47:35Z

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!

timneutkens · 2024-04-12T14:16:22Z

Hey everyone, in case you missed it @sokra is investigating a fix here: #64386.

Asifislam7 · 2024-04-12T14:31:19Z

After doing what #64371 commented, bug is fixed but tailwind is not working. No CSS styling is visible on the screen :(.

web-sujal · 2024-04-12T15:17:18Z

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.

Was experiencing the same issue!
Worked perfectly for me!
thanks a lot mate

arismtj · 2024-04-12T16:08:24Z

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

atmoshaman · 2024-04-12T16:15:11Z

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 .

thanks a lot

arismtj · 2024-04-12T17:02:21Z

el error es instalar tailwind al inicia el proyecto

…ths (#64386) ### What? Fixes #64371 Fixes #63359 Closes PACK-2946 --------- Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Jiachi Liu <inbox@huozhi.im>

rshetty-99 · 2024-04-12T22:42:25Z

I had to update my nextjs. I cannot run after the new install

I have installed nextjs, shadcn, Firebase for auth. IT is a bare minimum install.

my next.config.js is:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'lh3.googleusercontent.com',
},
],
},
};

npm run dev

samurainextjstemplate@0.1.0 dev
next dev

▲ Next.js 14.2.1

Local: http://localhost:3000

✓ Starting...
✓ Ready in 2.9s
○ Compiling / ...
✓ Compiled / in 4.1s (794 modules)
GET / 200 in 4581ms
✓ Compiled in 570ms (361 modules)
○ Compiling /sign-in ...
✓ Compiled /sign-in in 1388ms (784 modules)
Warning: Invalid DOM property for. Did you mean htmlFor?
at label
at div
at form
at div
at section
at SignInPage (webpack-internal:///(ssr)/./app/(auth)/sign-in/page.tsx:18:110)
at ClientPageRoot (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/client-page.js:14:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:364:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:364:11)
at Lazy
at div
at section
at div
at main
at AuthLayout (webpack-internal:///(ssr)/./app/(auth)/layout.tsx:22:23)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:344:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:364:11)
at Lazy
at AuthContextProvider (webpack-internal:///(ssr)/./app/context/AuthContext.js:27:32)
at body
at html
at RootLayout (webpack-internal:///(ssr)/./app/layout.tsx:24:23)
at Lazy
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:322:11)
at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:202:11)
at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:556:13)
at Lazy
at r1 (C:\src\AI\techsamurai\samurainextjstemplate\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:18608)
at r1 (C:\src\AI\techsamurai\samurainextjstemplate\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:18608)
at ServerInsertedHTMLProvider (C:\src\AI\techsamurai\samurainextjstemplate\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:24024)

chk7964 · 2024-04-15T13:06:31Z

I solve my problem
First rename next config file extension js to mjs
Also postcss

github-actions · 2024-04-30T00:04:13Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

verdaderoken added the bug Issue was opened via the bug report template. label Apr 11, 2024

github-actions bot added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Apr 11, 2024

This comment was marked as outdated.

Sign in to view

jorchsg mentioned this issue Apr 12, 2024

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME] on Windows Using [npm run dev] #64372

Closed

sokra mentioned this issue Apr 12, 2024

use pathToFileUrl to make esm import()s work with absolute windows paths #64386

Merged

Thanaen mentioned this issue Apr 12, 2024

An error occurred in next/font. #64393

Closed

This comment was marked as off-topic.

Sign in to view

huozhi closed this as completed in #64386 Apr 12, 2024

miurla mentioned this issue Apr 16, 2024

next font error when run yarn dev miurla/morphic#16

Closed

github-actions bot added the locked label Apr 30, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

verdaderoken commented Apr 11, 2024 •

edited

Ahmed-Elgendy25 commented Apr 11, 2024

kachkaev commented Apr 11, 2024 •

edited

This comment was marked as outdated.

kachkaev commented Apr 11, 2024

verdaderoken commented Apr 11, 2024

stephenrt42 commented Apr 12, 2024 •

edited

AhmedMohammedMostafa commented Apr 12, 2024

This comment was marked as outdated.

PhucNghi176 commented Apr 12, 2024

chk7964 commented Apr 12, 2024 •

edited

riad-azz commented Apr 12, 2024

Azoonex commented Apr 12, 2024

HOTLancerX commented Apr 12, 2024

albin-baby-2002 commented Apr 12, 2024

MohammedNayeemE commented Apr 12, 2024

IconicMayukh commented Apr 12, 2024

This comment was marked as off-topic.

timneutkens commented Apr 12, 2024

Asifislam7 commented Apr 12, 2024

web-sujal commented Apr 12, 2024

This comment was marked as off-topic.

arismtj commented Apr 12, 2024

atmoshaman commented Apr 12, 2024

arismtj commented Apr 12, 2024

rshetty-99 commented Apr 12, 2024 •

edited

chk7964 commented Apr 15, 2024

github-actions bot commented Apr 30, 2024

create-next-app: Build Error using next dev v14.2 (ERR_UNSUPPORTED_ESM_URL_SCHEME) #64371

create-next-app: Build Error using next dev v14.2 (ERR_UNSUPPORTED_ESM_URL_SCHEME) #64371

Comments

verdaderoken commented Apr 11, 2024 • edited

EDIT: Temporary solution

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

Ahmed-Elgendy25 commented Apr 11, 2024

kachkaev commented Apr 11, 2024 • edited

This comment was marked as outdated.

kachkaev commented Apr 11, 2024

verdaderoken commented Apr 11, 2024

stephenrt42 commented Apr 12, 2024 • edited

AhmedMohammedMostafa commented Apr 12, 2024

This comment was marked as outdated.

PhucNghi176 commented Apr 12, 2024

chk7964 commented Apr 12, 2024 • edited

riad-azz commented Apr 12, 2024

Azoonex commented Apr 12, 2024

HOTLancerX commented Apr 12, 2024

albin-baby-2002 commented Apr 12, 2024

MohammedNayeemE commented Apr 12, 2024

IconicMayukh commented Apr 12, 2024

This comment was marked as off-topic.

timneutkens commented Apr 12, 2024

Asifislam7 commented Apr 12, 2024

web-sujal commented Apr 12, 2024

This comment was marked as off-topic.

arismtj commented Apr 12, 2024

atmoshaman commented Apr 12, 2024

arismtj commented Apr 12, 2024

rshetty-99 commented Apr 12, 2024 • edited

chk7964 commented Apr 15, 2024

github-actions bot commented Apr 30, 2024

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

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

verdaderoken commented Apr 11, 2024 •

edited

kachkaev commented Apr 11, 2024 •

edited

stephenrt42 commented Apr 12, 2024 •

edited

chk7964 commented Apr 12, 2024 •

edited

rshetty-99 commented Apr 12, 2024 •

edited