postcss-cli-resources can't resolve url

[akhant]

Current Behavior

I use withNx and withReact plugins in my project. Can't resolve url() inside some css files from node_modules(primereact) and just my custom .css files, when I try to load some resources(png, woff ...)

I am getting error

ERROR in ../../node_modules/primereact/resources/themes/lara-light-indigo/theme.css (../../node_modules/primereact/resources/themes/lara-light-indigo/theme.css.webpack[javascript/auto]!=!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[3].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[3].use[2]!../../node_modules/primereact/resources/themes/lara-light-indigo/theme.css)
Module Error (from ../../node_modules/postcss-loader/dist/cjs.js):
E:\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo\theme.css:68:13: Can't resolve '\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo\fonts\InterVariable-Italic.woff2' in 'E:\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo'
CssSyntaxError: E:\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo\theme.css:68:13: Can't resolve '\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo\fonts\InterVariable-Italic.woff2' in 'E:\dev\project-template-front\node_modules\primereact\resources\themes\lara-light-indigo'

I think problem in this place

Result of this code with console.logs

so in result of new URL we getting wrong "pathname"

Expected Behavior

urls inside css resolve properly

GitHub Repo

No response

Steps to Reproduce

add custom css with url() inside
run npx nx serve shell

Nx Report

Node           : 22.20.0
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.9.4

nx                     : 21.5.3
@nx/js                 : 21.5.3
@nx/jest               : 21.5.3
@nx/eslint             : 21.5.3
@nx/workspace          : 21.5.3
@nx/cypress            : 21.5.3
@nx/devkit             : 21.5.3
@nx/eslint-plugin      : 21.5.3
@nx/module-federation  : 21.5.3
@nx/playwright         : 21.5.3
@nx/react              : 21.5.3
@nx/rollup             : 21.5.3
@nx/storybook          : 21.5.3
@nx/vite               : 21.5.3
@nx/web                : 21.5.3
@nx/webpack            : 21.5.3
nx-cloud               : 19.1.0
@nrwl/nx-cloud         : 19.1.0
typescript             : 5.9.2
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/playwright/plugin
@nx/jest/plugin
@nx/storybook/plugin
---------------------------------------
Cache Usage: 0.00 B / 93.15 GB

Failure Logs

at finishWithoutResolve (E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:565:18)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:657:14
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:16:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:27:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:89:43
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:16:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:16:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:57:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\ConditionalPlugin.js:53:42
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\Resolver.js:718:5
    at eval (eval at create (E:\dev\project-template-front\node_modules\tapable\lib\HookCodeFactory.js:31:10), <anonymous>:16:1)
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\forEachBail.js:39:13
    at E:\dev\project-template-front\node_modules\enhanced-resolve\lib\ModulesInHierarchicalDirectoriesPlugin.js:83:16
    at processTicksAndRejections (node:internal/process/task_queues:89:21) {
  details: "resolve '\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2' in 'E:\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo'\n" +
    '  Parsed request is a module\n' +
    '  using description file: E:\\dev\\project-template-front\\node_modules\\primereact\\package.json (relative path: ./resources/themes/lara-light-indigo)\n' +
    "    Field 'browser' doesn't contain a valid alias configuration\n" +
    '    resolve as module\n' +
    "      E:\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\node_modules doesn't exist or is not a directory\n" +
    "      E:\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\node_modules doesn't exist or is not a directory\n" +
    "      E:\\dev\\project-template-front\\node_modules\\primereact\\resources\\node_modules doesn't exist or is 
not a directory\n" +
    "      E:\\dev\\project-template-front\\node_modules\\primereact\\node_modules doesn't exist or is not a directory\n" +
    "      E:\\dev\\project-template-front\\node_modules\\node_modules doesn't exist or is not a directory\n" +   
    '      looking for modules in E:\\dev\\project-template-front\\node_modules\n' +
    '        single file module\n' +
    '          using description file: E:\\dev\\project-template-front\\package.json (relative path: ./node_modules/dev/project-template-front/node_modules/primereact/resources/themes/lara-light-indigo/fonts/InterVariable.woff2)\n' +
    '            no extension\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2 doesn't exist\n" +
    '            .ts\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2.ts doesn't exist\n" +
    '            .tsx\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2.tsx doesn't exist\n" +
    '            .mjs\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2.mjs doesn't exist\n" +
    '            .js\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2.js doesn't exist\n" +
    '            .jsx\n' +
    "              Field 'browser' doesn't contain a valid alias configuration\n" +
    "              E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2.jsx doesn't exist\n" +
    "        E:\\dev\\project-template-front\\node_modules\\dev\\project-template-front\\node_modules\\primereact\\resources\\themes\\lara-light-indigo\\fonts\\InterVariable.woff2 doesn't exist\n" +
    "      E:\\dev\\node_modules doesn't exist or is not a directory\n" +
    "      E:\\node_modules doesn't exist or is not a directory"
}

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[jehrenzweig-captionhealth]

Is this the same problem (#32582) that a previous pair of codes changes (95e7b49, 9bddf59) tried to address? If so, somebody recently posted that it was still a problem even after that issue was closed.

FWIW we just ran into a problem that sounds like this one & downgrading to 21.4.0 fixed it for us. We only saw the problem on Windows; we were unable to repro on macOS.

[HarlesPilter]

Sadly we can't move to 21.4.0 since we use module federation and #32542 was only fixed in https://github.com/nrwl/nx/releases/tag/21.5.1. So this bug is a major issue for us and prevents us from bumping any version of NX (we are currently on 21.2.0) or re-creating package-lock.json

[jorgeramirezamora]

Same here, we are stucked at 21.4.0, this error comes from this upgrade that happens in 21.4.1:

FYI we already tried go up to latest, which is 22.2.0 as of today, and still happening @Coly010.

This also happens in Linux if you can update the original description @akhant.

[HarlesPilter]

Has anyone found a workaround?

Edit: Was able to create a workaround with patch-package and changes to postcss-cli-resources.js. The issue was only in Windows & Linux (Mac was working fine) and I believe the issue was with OS specific \ vs / chars passed to the new URL method.