Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TurboPack] When using a custom PostCSS config, TurboPack fails to compile application on Windows #63755

Closed
pixel-toys-chris-evans opened this issue Mar 27, 2024 · 7 comments · Fixed by vercel/turbo#7995
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. locked Turbopack Related to Turbopack with Next.js.

Comments

@pixel-toys-chris-evans
Copy link

pixel-toys-chris-evans commented Mar 27, 2024

Link to the code that reproduces this issue

https://github.com/pixel-toys-chris-evans/browserslist-file-resolution-turbo-win32

To Reproduce

  1. Start the application using next dev with --turbo set on a Windows OS.
  2. See the error raised in the next dev error overlay and console.

> next dev --turbo
  ▲ Next.js 14.2.0-canary.44 (turbo)
  - Local:        http://localhost:3000
 ✓ Starting...
 ✓ Ready in 1681ms
css_asset: Vc { node: TaskCell(TaskId { id: 67444 }, CellId { type_id: ValueTypeId { id: 121, name: "turbopack-core@TODO::::virtual_source::VirtualSource" }, index: 0 }) }, query: ?{%22path%22:%22layout.tsx%22,%22import%22:%22Inter%22,%22arguments%22:[{%22subsets%22:[%22latin%22]}],%22variableName%22:%22inter%22}
 ○ Compiling / ...
 ✓ Compiled / in 1461ms
 ⨯ ModuleBuildError: ./app/page.module.css
Error evaluating Node.js code
Error: Failed to load external module D:\development\browserslist-file-resolution-turbo-win32/./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 'd:'
    at externalImport (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:16:11) [D:\development\browserslist-file-resolution-turbo-win32\.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) [D:\development\browserslist-file-resolution-turbo-win32\.next\chunks\_0b8f1c._.js:11:13]
./app/globals.css
Error evaluating Node.js code
Error: Failed to load external module D:\development\browserslist-file-resolution-turbo-win32/./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 'd:'
    at externalImport (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:16:11) [D:\development\browserslist-file-resolution-turbo-win32\.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) [D:\development\browserslist-file-resolution-turbo-win32\.next\chunks\_0b8f1c._.js:11:13]
    at processIssues (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\turbopack-utils.js:205:15)
    at handleRouteType (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\turbopack-utils.js:360:17)
    at async Object.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\hot-reloader-turbopack.js:622:17)
    at async DevBundlerService.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\dev-bundler-service.js:18:20)
    at async DevServer.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:551:9)
    at async Object.ensure (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:169:17)
    at async DevRouteMatcherManager.matchAll (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\future\route-matcher-managers\dev-route-matcher-manager.js:96:13)
    at async DevRouteMatcherManager.match (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\future\route-matcher-managers\default-route-matcher-manager.js:155:26)
    at async NextNodeServer.handleCatchallRenderRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:228:31)
    at async DevServer.handleRequestImpl (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:807:17)
    at async D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:151:20)
    at async DevServer.handleRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:141:13)
 ○ Compiling /_error ...
 ✓ Compiled /_error in 551ms
 GET / 500 in 2175ms
 ⨯ ModuleBuildError: ./app/page.module.css
Error evaluating Node.js code
Error: Failed to load external module D:\development\browserslist-file-resolution-turbo-win32/./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 'd:'
    at externalImport (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:16:11) [D:\development\browserslist-file-resolution-turbo-win32\.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) [D:\development\browserslist-file-resolution-turbo-win32\.next\chunks\_0b8f1c._.js:11:13]
./app/globals.css
Error evaluating Node.js code
Error: Failed to load external module D:\development\browserslist-file-resolution-turbo-win32/./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 'd:'
    at externalImport (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:16:11) [D:\development\browserslist-file-resolution-turbo-win32\.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) [D:\development\browserslist-file-resolution-turbo-win32\.next\chunks\_0b8f1c._.js:11:13]
    at processIssues (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\turbopack-utils.js:205:15)
    at handleRouteType (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\turbopack-utils.js:360:17)
    at async Object.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\hot-reloader-turbopack.js:622:17)
    at async DevBundlerService.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\dev-bundler-service.js:18:20)
    at async DevServer.ensurePage (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:551:9)
    at async Object.ensure (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:169:17)
    at async DevRouteMatcherManager.matchAll (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\future\route-matcher-managers\dev-route-matcher-manager.js:96:13)
    at async DevRouteMatcherManager.match (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\future\route-matcher-managers\default-route-matcher-manager.js:155:26)
    at async NextNodeServer.handleCatchallRenderRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:228:31)
    at async DevServer.handleRequestImpl (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:807:17)
    at async D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:151:20)
    at async DevServer.handleRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (D:\development\browserslist-file-resolution-turbo-win32\node_modules\.pnpm\next@14.2.0-canary.44_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:141:13)
 GET / 500 in 161ms

Current vs. Expected behavior

Absolute paths within the built chunks are letter based which throws an error on Windows machines. This works fine for our MacOS based machines.

Windows NodeJS is expecting a file:// absolute path.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32441
  Available CPU cores: 20
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.2.0-canary.44 // Latest available version is detected (14.2.0-canary.44).
  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

This is not currently in the latest release, and can only be found in the Canary release. We updated due to the compilation issues with Sanity.io builds using the --turbo flag in lts that are fixed in Canary.

PACK-2880

@pixel-toys-chris-evans pixel-toys-chris-evans added the bug Issue was opened via the bug report template. label Mar 27, 2024
@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label Mar 27, 2024
@pixel-toys-chris-evans pixel-toys-chris-evans changed the title [TurboPack] When using a custom PostCSS config, TurboPack fails to compile application on Windows in Canary [TurboPack] When using a custom PostCSS config, TurboPack fails to compile application on Windows @14.2.0-canary.44 Mar 27, 2024
@iojcde
Copy link
Contributor

iojcde commented Mar 29, 2024

For me renaming postcss.config.js to postcss.config.cjs fixed this issue.
#63359

@sokra sokra added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Mar 30, 2024
LukeHosk added a commit to CM20314-Group-7/rental-review that referenced this issue Apr 1, 2024
fixes the `ERR_UNSUPPORTED_ESM_URL_SCHEME` as suggested by vercel/next.js#63755 (comment)
@agilido
Copy link

agilido commented Apr 3, 2024

For me renaming postcss.config.js to postcss.config.cjs fixed this issue. #63359

Thank you @iojcde !
Do you know why this fix is working?

@kachkaev
Copy link
Contributor

kachkaev commented Apr 11, 2024

For those who are here from search: I have just bumped into the same issue after upgrading to Next.js 14.2.0 and adding --turbo to next dev. My postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "./my-custom-plugin.cjs": {},
  },
};

Output:

Error evaluating Node.js code
Error: Failed to load external module ./my-custom-plugin.cjs: Error: Cannot find module './my-custom-plugin.cjs'
Require stack:
- /path/to/project/.next/chunks/[output]__next_transform_d7cb3a.js
- /path/to/project/.next/transform.js
    at externalRequire (/turbopack/[turbopack]/shared-node/base-externals-utils.ts:38:11) [/path/to/project/.next/chunks/[output]__next_transform_d7cb3a.js:1361:15]
    (error resolving source map: Execution of FileContent::lines failed)
    [at <anonymous>]
    (error resolving source map)

Here is what worked for me:

 module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-    "./my-custom-plugin.cjs": {},
+    [`/${require("node:path").resolve(".")}/my-custom-plugin.cjs`]: {},
   },
 };

Oddly enough, using __dirname instead of require("node:path").resolve(".") does not help because __dirname resolves to [project] 🤷

@bgw
Copy link
Member

bgw commented Apr 12, 2024

It looks like this should be resolved by #64386.

Thanks for reporting this issue!

@bgw bgw closed this as completed Apr 12, 2024
@timneutkens
Copy link
Member

timneutkens commented Apr 16, 2024

This is still relevant for loading the postcss.config.js, it's fixed for next.config.js loading only in #64386

@timneutkens timneutkens reopened this Apr 16, 2024
@timneutkens timneutkens changed the title [TurboPack] When using a custom PostCSS config, TurboPack fails to compile application on Windows @14.2.0-canary.44 [TurboPack] When using a custom PostCSS config, TurboPack fails to compile application on Windows Apr 16, 2024
bgw added a commit to vercel/turbo that referenced this issue Apr 17, 2024
Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes vercel/next.js#63755

Similar to vercel/next.js#64386
bgw added a commit to vercel/turbo that referenced this issue Apr 17, 2024
Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes vercel/next.js#63755

Similar to vercel/next.js#64386
@bgw
Copy link
Member

bgw commented Apr 18, 2024

@pixel-toys-chris-evans I've confirmed that after updating your project to next.js 14.2.2, the issue no longer reproduces on Windows. Thanks again for submitting!

Copy link
Contributor

github-actions bot commented May 2, 2024

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.

@github-actions github-actions bot added the locked label May 2, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 2, 2024
ForsakenHarmony pushed a commit that referenced this issue Jul 25, 2024
…cel/turbo#7995)

Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes #63755

Similar to #64386
ForsakenHarmony pushed a commit that referenced this issue Jul 29, 2024
…cel/turbo#7995)

Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes #63755

Similar to #64386
ForsakenHarmony pushed a commit that referenced this issue Jul 29, 2024
…cel/turbo#7995)

Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes #63755

Similar to #64386
ForsakenHarmony pushed a commit that referenced this issue Aug 1, 2024
…cel/turbo#7995)

Absolute paths don't work for imports on windows because `c:\` is
interpreted as a URI scheme. The workaround is to use an unambiguous
`file://` URI.

Fixes #63755

Similar to #64386
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. locked Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants