TurboPack crashes immediately while compiling any page. Webpack working fine

[Its-Satyajit]

Link to the code that reproduces this issue

https://github.com/Its-Satyajit/nextjs-drizzle-mysql-tailwind

To Reproduce

git clone https://github.com/Its-Satyajit/nextjs-drizzle-mysql-tailwind.git
cd nextjs-drizzle-mysql-tailwind
pnpm install

add db credential in .evn

pnpm dk:gen
pnpm db:mig
pnpm dev-t

Current vs. Expected behavior

Here's what I expect to happen: When I run the script dev-t, it should start the development server and serve the webpage in the browser.

However, here's what's actually happening: Although the development server starts successfully, as soon as I navigate to the path "/", the application crashes. This issue only occurs when I use the script dev-t, which runs next dev --turbo. Strangely enough, when I use the script dev, which simply runs next dev, everything works fine without any errors.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
Binaries:
  Node: 20.12.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.4
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

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

Turbopack (--turbo)

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

next dev (local)

Additional context

I've tested my repository using Next.js version 14.2.0-canary.50.
During my tests, I found that everything works smoothly when running the command pnpm dev. The terminal output confirms this with a message saying:

script

"dev": "next dev",

nextjs-drizzle-mysql-tailwind on  main [!] via  v20.12.0 took 6m29s
❯ pnpm dev

> [email protected] dev G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind
> next dev

  ▲ Next.js 14.2.0-canary.50
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 2.6s
 ○ Compiling / ...
 ✓ Compiled / in 4.6s (721 modules)
 ✓ Compiled in 573ms (232 modules)
 GET / 307 in 5244ms
 ○ Compiling /signin ...
 ✓ Compiled /signin in 4.4s (755 modules)
 GET /signin 200 in 4762ms

but I encountered an issue while testing my repository with Next.js version 14.2.0-canary.50.
When I ran the command pnpm dev-t, it resulted in a significant error, something I hadn't encountered before when using version 14.1.4. The error seems to be related to the postcss.config.js file, but I'm having trouble resolving it.

script

"dev-t": "next dev --turbo",

nextjs-drizzle-mysql-tailwind on  main [!] via  v20.12.0 
❯ pnpm dev-t

> [email protected] dev-t G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind
> next dev --turbo

  ▲ Next.js 14.2.0-canary.50 (turbo)
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 1134ms
 ○ Compiling / ...
 ✓ Compiled / in 2.7s
 ⨯ ModuleBuildError: ./src/app/globals.css
Error evaluating Node.js code
Error: Failed to load external module G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind/./postcss.config.js: 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 'g:'
    at externalImport (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:16:11) [G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\.next\chunks\[output]__next_transform_ad1f0f.js:1336:15]
    [at process.processTicksAndRejections (node:internal/process/task_queues:95:5)]
    at async (postcss.config.js_.loader.mjs:3:13) [G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\.next\chunks\_0b8f1c._.js:11:13]


    at processIssues (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\turbopack-utils.js:220:15)
    at handleRouteType (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\turbopack-utils.js:375:17)
    at async Object.ensurePage (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\hot-reloader-turbopack.js:642:17)
    at async DevBundlerService.ensurePage (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\dev-bundler-service.js:18:20)
    at async DevServer.ensurePage (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\next-dev-server.js:551:9)
    at async Object.ensure (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\next-dev-server.js:169:17)
    at async DevRouteMatcherManager.matchAll (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\future\route-matcher-managers\dev-route-matcher-manager.js:96:13)
    at async DevRouteMatcherManager.match (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\future\route-matcher-managers\default-route-matcher-manager.js:155:26)
    at async NextNodeServer.handleCatchallRenderRequest (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\next-server.js:228:31)
    at async DevServer.handleRequestImpl (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\base-server.js:807:17)
    at async G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (G:\Projects\Nextjs\nextjs-drizzle-mysql-tailwind\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js:141:13)
 ○ Compiling /_error ...
 ✓ Compiled /_error in 702ms
 GET / 500 in 3714ms

_PACK-2892

[LukeHosk]

Wes just found the same issue, and renaming postcss.config.js to postcss.config.cjs fixed it for me.

Interestingly, this only appears to be a problem on Windows, it worked fine on MacOS.

[Its-Satyajit]

Thanks a bunch for letting me know!

So, in the next@canary version, renaming postcss.config.js to postcss.config.cjs did the trick for me! 🎉 However, when I tried it in the stable version [email protected], it ended up crashing. 😕

Guess I'll have to patiently wait for the stable release to sort things out.

Thanks again for keeping me in the loop!

[bgw]

The postcss.config.js file path issue should be resolved by #64386.

There's a segfault that occurs while compiling your project, which is being tracked in swc-project/swc#8840.

[Its-Satyajit]

Thanks for the update! Appreciate the heads-up on the PostCSS path fix and the investigation into the segfault. Let me know if you need any further info from my end.

[ezeamin]

Hi! Here running [email protected], just updated, and the app that was working fine with <14.2 now doesn't. App is running on --turbo. The issue is also with the postcss.config.js file, renaming it to use .cjs solves the issue.

With webpack, it works fine too.

Edit: Tried it in 14.3.0-canary.4 and error is present too.

[timneutkens]

Combining #63755 and this one as they're the same issue 🙏

[github-actions]

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.