Parcel: [Windows] relative file paths get compiled to backslash paths

Created on 6 Sep 2018 · 8Comments · Source: parcel-bundler/parcel

🐛 bug report

🎛 Configuration (`index.html`, `manifest.webmanifest`)

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  [...]
  <link rel="manifest" href="./manifest.webmanifest">
  [...]
</head>
[...]

```json
{
"name": "WebApp",
"short_name": "WebApp",
"icons": [
{
"src": "./assets/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./assets/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}


## 🤔 Expected Behavior

Paths should get transpiled to dist folder using forward slashes (`/`)

## 😯 Current Behavior

Transpiled paths are actually relative windows paths
```json
{
  "name": "WebApp",
  "short_name": "WebApp",
  "icons": [
    {
      "src": "assets\icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets\icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

💁 Possible Solution

Asset files referenced in manifest.webmanifest should get translated into forward-slashed paths based on either relative or absolute directory base. I found an issue about that, see Context.

🔦 Context

index.html is my entry file referencing manifest.webmanifest.
It seems when I reference the files used in web manifest (eg. using <a href="src">[...]</a>) these files get the relative using back slashes because I'm using windows.
When I don't reference these files anywhere else in my html file everything works as intended, paths wont get messed up.

💻 Code Sample

https://github.com/peanutbother/parcel-bundler-manifest-issue

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 10.4.0
| npm/Yarn | yarn 1.9.4
| Operating System | Windows 10 [10.0.17134.228]

Bug Help Wanted

Source

peanutbother

👍9

Most helpful comment

This is still a problem which I think should be fixed but here is a quick solution:

$ npx rexreplace '\\' '/' ./dist/*.css

You have to use '\\' as opposed to '\' because it is a special character so you have to escape it.

FYI
I haven't found a way to use this command in your package.json because of all the escaping.

EmmaGoodliffe on 7 Mar 2020

👍3

All 8 comments

Additionally I could observe this behaviour in my entry html file, where relative file paths get compiled and replaced by windows-style relative paths.

peanutbother on 7 Sep 2018

I second this,

Our electron application is built from windows machines resulting in backslashes beeing used for all platforms. It is a good idea to use forward slashes as default but also giving the user to option to override this behavior per option as a electron applications will have target specific builds.

Hammster on 21 Sep 2018

👍3

I just ran into this same issue trying to load a service worker. I see this is marked as [Help Wanted], any hints on where to get started with fixing this?

wolfgang42 on 26 Jun 2019

Also, does anyone have a workaround in the meantime?

wolfgang42 on 26 Jun 2019

My guess is since we fixed path joins with path.join which uses os specific directory separators, parcel also transpiles paths in source files with these directory separators which can cause this issue we see here.

packages/core/parcel-bundler/src/Resolver.js contains the logic for resolving paths in assets IIRC, so we should check if paths are resolved with directory separators in the right way.

I might be wrong this is just what I can recall on the run right now.

peanutbother on 26 Jun 2019

same problem here.

I'm compiling a WebExtension on Windows, all paths get converted:

"assets/css" -> "assets\css"

And the compiled manifest.json is no longer valid json. \c is a bad escaped character.
(I don't know if \c is actually a problem. But there are letters that definitely create problems. This is just as an example)

lhk on 13 Sep 2019

👀1

This is still a problem which I think should be fixed but here is a quick solution:

$ npx rexreplace '\\' '/' ./dist/*.css

You have to use '\\' as opposed to '\' because it is a special character so you have to escape it.

FYI
I haven't found a way to use this command in your package.json because of all the escaping.

EmmaGoodliffe on 7 Mar 2020

👍3

Also I am noticing that the referenced local file for the compiled js is src="file.js" instead of src="./file.js". Without it when loading up just the file it is broken. I would favor using the more literal reference for the compiled JS in the same folder.