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.

Sign up for GitHub

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

Jump to bottom

[Windows] relative file paths get compiled to backslash paths #1990

Closed
peanutbother opened this issue Sep 6, 2018 · 9 comments
Closed

[Windows] relative file paths get compiled to backslash paths #1990

peanutbother opened this issue Sep 6, 2018 · 9 comments
Labels
🐛 Bug 🙏 Help Wanted Stale Inactive issues

Comments

@peanutbother
Copy link
Contributor

🐛 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>
[...]
{
  "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

{
  "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]
@peanutbother
Copy link
Contributor Author

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

This was referenced Sep 12, 2018
Merged
Closed
@Hammster
Copy link
Contributor

Hammster commented Sep 21, 2018 •
edited
Loading

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.

@wolfgang42
Copy link

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
Copy link

Also, does anyone have a workaround in the meantime?

@peanutbother
Copy link
Contributor Author

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.

@lhk
Copy link

lhk commented Sep 13, 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)

@EmmaGoodliffe
Copy link

EmmaGoodliffe commented Mar 7, 2020 •
edited
Loading

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.

@github-actions github-actions bot added Stale Inactive issues and removed Stale Inactive issues labels Sep 3, 2020
@TroySchmidt
Copy link

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.

lqdchrm added a commit to lqdchrm/parcel that referenced this issue Dec 2, 2020
@lqdchrm
fix for backslashes in entry-asset names (parcel-bundler#1990)
3ae267b
@github-actions
Copy link

github-actions bot commented Mar 9, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

@github-actions github-actions bot added the Stale Inactive issues label Mar 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug 🙏 Help Wanted Stale Inactive issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Hammster @lhk @TroySchmidt @DeMoorJasper @wolfgang42 @peanutbother @EmmaGoodliffe