🐛 Parcel fails to find dependencies if it contains spaces on the file name

[jesobreira]

🎛 Configuration

parcel index.html

🤔 Expected Behavior

No errors.

😯 Current Behavior

$ parcel index.html
Server running at http://localhost:1234
🚨  /Users/user/dev/test/index.html: Cannot resolve dependency './test%20file.js' at '/Users/user/dev/test/test%    at /usr/local/lib/node_modules/parcel-bundler/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/usr/local/lib/node_modules/parcel-bundler/node_modules/browser-resolve/node_modules/resolve/lib/a✨  Built in 8ms.

Browser:

🚨 Build error, check the console for details.

💁 Possible Solution

Accept spaces ( ) on the file name, checking the file system before URL-encoding it to %20.

🔦 Context

I've received a front-end to work on, however it has a long CSS file with some background-images pointing to images with spaces on the file name.

💻 Code Sample

index.html

<script src="test file.js"></script>

test file.js

document.write("test");

🌍 Your Environment

Software	Version(s)
Parcel	1.6.2
Node	8.9.1
npm/Yarn	npm 5.6.0
Operating System	macOS X 10.13.2

[davidnagli]

I don’t thing it would be hard to implement this (especially now that we have our own resolver, but I don’t really know if it even makes sense to consider supporting filenames with spaces.

[brandon93s]

The src attribute should contain a valid URL. A space is not valid in a URL unless it's encoded. The code sample is not valid HTML.

[jesobreira]

What I find it interesting is that Parcel does URL Encode it and make it a valid URL, but then fails to find the file. You can check on the error message on my first post:

Cannot resolve dependency './test%20file.js'

I used HTML as an example because I thought it was an easier way to show off this behavior, but I've faced it first through a CSS file with several background-images pointing to spaced filenames.

[brandon93s]

Parcel may be URL encoding it, but the name on the file system isn't encoding it. Because of this, the file resolution will fail when the fs module tries to load the literal (encoded) file name.

[DeMoorJasper]

We could decode the requires before resolving them, but not sure if it should even be a feature as Brandon mentioned it’s not valid url

_{Sent with GitHawk}

[mririgoyen]

This is very problematic with CSS links as well. Consider:

src: url('../../services/font/fonts/Open Sans/Open Sans-Light.woff2') format('woff2');

It cannot find that file because its looking for "Open%20Sans".

In this case, we're not talking about a "URL," we're talking about a path to a resource that Parcel is supposed to scoop up and compile into its package.

Please fix this.

[jesobreira]

Actually I've also faced this issue when trying to use a font with CSS url(), exactly like @goyney. My example was in HTML only to simplify the occurrence.

[DeMoorJasper]

I've created a PR that fixes this, it seems like a valid use-case as the exposed filename for the browser is the one parcel generates anyways.