Path to resource is getting its backslashes removed on WIndows

[LFDanLu]

Hi, I've been running into a issue where it seems like a path to a resource is losing its backslashes on Windows. It seems like a classic escaping issue but attempts to work around/fix the path haven't worked out. This very well maybe a fault with something in https://github.com/devongovett/unplugin-parcel-macros but I've hit a wall debugging walking through the stack trace and would appreciate some pointers.

To reproduce:
repository: https://github.com/LFDanLu/s2-test-app
Using Git Bash on Windows. node version 18.18.2

1. Pull the project down and install.
2. Run using yarn start.
3. Note the follow error appears:

ERROR in C:Usersdl164OneDriveDocumentsdevempty-projectsrcApp.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css
Module build failed: UnhandledSchemeError: Reading from "C:Usersdl164OneDriveDocumentsdevempty-projectsrcApp.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "c:" URIs.

Locally, I've confirmed that the output of the unplugin-macro returns code that looks something like

  code: 'import "@react-spectrum/s2/page.css";\n' +
    'import { Button } from "@react-spectrum/s2";\n' +
    'import React from "react";\n' +
    "import { hot } from 'react-hot-loader/root';\n" +
    'class App extends React.Component {\n' +
    '    render() {\n' +
    '        const { name } = this.props;\n' +
    '        return (<>\n' +
    '\n' +
    '      <div>awegwge</div>\n' +
    '\n' +
    '      <Button styles={" . ye"}>\n' +
    '\n' +
    '        Hello Spectrum 2!\n' +
    '\n' +
    '      </Button>\n' +
    '\n' +
    '      </>);\n' +
    '    }\n' +
    '}\n' +
    'export default hot(App);\n' +
    '\n' +
    'import "C:\\Users\\dl164\\OneDrive\\Documents\\dev\\empty-project\\src\\App.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css";',
  map: '{"version":3,"sources":["test.js"],"names":[],"mappings":"AAAA,OAAO,8BAA8B;AAErC,SAAS,MAAM,QAAQ,qBAAqB;AAC5C,OAAO,WAAW,QAAQ;AAC1B,SAAS,GAAG,QAAQ,wBAAwB;AAE5C,MAAM,YAAY,MAAM,SAAS;IAC/B,SAAS;QACP,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK;QAC3B,OAAO,GACH;;MACF,CAAC,IAAI,OAAO,EAAE,IAAI;;MAClB,CAAC,OACC,iBAGD;;;;MAED,EAAE,OAAO;;MACT,GACF;IACF;AACF;AAEA,eAAe,IAAI,KAAK"}'

where it looks like the path is properly escaped. However, as I stepped through the stack I eventually ended up in Compilation where the request field in the dependencies shows that it has become request: 'C:Usersdl164OneDriveDocumentsdevempty-projectsrcApp.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css' at which I got stuck trying to figure out where the dependencies were coming from.

I verified that modifying the path here changed what the request field became, but attempting to use posix separators or further escaping all cause it to fail at an earlier step (not super sure about this but it no longer creates a NormalModule with a macro path that I was previously logging against):

ERROR in ./src/App.js 50:0-155
Module not found: Error: Can't resolve 'C:\Users\dl164\OneDrive\Documents\dev\empty-project\src\App.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css' in 'C:\Users\dl164\OneDrive\Documents\dev\empty-project\src'

Module not found: Error: Can't resolve 'C:/Users/dl164/OneDrive/Documents/dev/empty-project/src/App.js.macro-fb0d4180853462d3bcb94480fb3b2b62c62519e0b35074e4a51d1c603706c075.css' in 'C:\Users\dl164\OneDrive\Documents\dev\empty-project\src'

[alexander-akait]

You need to have URL in import, so if you want to use absolute path please use file:// protocol

[LFDanLu]

Sure, I've updated https://github.com/LFDanLu/s2-test-app so it has

let id = `file:\\\\${filePath}.macro-${hash.digest('hex')}.${asset.type}`;

here: https://github.com/LFDanLu/s2-test-app/blob/main/patches/unplugin-parcel-macros%2B0.0.3.patch with some logging. Reverting to the commit before will generate the original error. The error reproduces via using Git Bash on Windows with node version 18.18.2

[alexander-akait]

Can you create reproducible test repo using github?

[LFDanLu]

Apologies if I'm misunderstanding the ask here, but https://github.com/LFDanLu/s2-test-app using the following steps should reproduce the issue:

1. Pull the project down and install.
2. Run using yarn start.
3. Note that it errors

[alexander-akait]

Bug in unplugin-macros.js, you can't use file:\\\\${filePath}.macro-${hash.digest('hex')}.${asset.type}, because it is wrong file URL, the right usage is:

const { pathToFileURL } = require('node:url');
let id = pathToFileURL(`${filePath}.macro-${hash.digest('hex')}.${asset.type}`).toString();

anyway it will not work, because it is a virtual module, so you can't use file schema in such cases, there is not such file at all

[LFDanLu]

gotcha, thank you! I'll reach out to the maintainer of the unplugin-parcel-macros about this then.