Parcel: relative path issue

[curtiscarlson]

❔ Question

I have had parcel working on a project for some time. It involves bootstrap and font awesome. Today I started a new project and copied everything over. The css files are not being built the same.

Original compiled css:
src: url("fa-brands-400.fdfe395a.eot?#iefix") format("embedded-opentype"), url("fa-brands-400.d8fd1f09.woff2") format("woff2"), url("fa-brands-400.83e55726.woff") format("woff"), url("fa-brands-400.b28b6f6e.ttf") format("truetype"), url("fa-brands-400.2cc1c9e1.svg#fontawesome") format("svg"); }

New compiled css:
src: url("/fa-brands-400.fdfe395a.eot?#iefix") format("embedded-opentype"), url("/fa-brands-400.d8fd1f09.woff2") format("woff2"), url("/fa-brands-400.83e55726.woff") format("woff"), url("/fa-brands-400.b28b6f6e.ttf") format("truetype"), url("/fa-brands-400.2cc1c9e1.svg#fontawesome") format("svg"); }

Original command:
parcel build src/js/app.js --out-dir public/build

New command:
parcel build resources/js/app.js --out-dir public/build

The new compiled css is putting a '/' at the beginning of the file names. So the broswer is looking in the public/ folder, not the public/build folder, where the font files are. I spent about an hour tinkering around and gave up trying to fix it for tonight. The app.js files are the same, my package.json is the same, the html that brings in the js and css is the same.

<link rel="stylesheet" href="/build/app.css">

The only difference is that I started a laravel project so the folder is called 'resources' and not 'src'. But I blew out their package.json and used mine on the fresh install.

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.4
| Node | 8.11.1
| npm/Yarn | 6.9.0
| Operating System | windows 10

Thank you

[curtiscarlson]

So I made a boilerplate with just the minimal code to test this and still got the issue. I downgraded to 1.11.0 and everything works properly again. Just looking for some direction on what I need to do to get the newest version working properly? different syntax running the script? or structure things a little differently? Thanks for any help.

[mischnic]

Just looking for some direction on what I need to do to get the newest version working properly

I'm afraid this is really a bug.

So I made a boilerplate with just the minimal code to test this and still got the issue

Could please share that here?

[curtiscarlson]

As requested, my first public repo.....

https://github.com/curtiscarlson/parcel-minimal

I will also add that the new version adds a .cache folder to the root of the project whereas the old version did not.... unless I am crazy.

Thanks!

[curtiscarlson]

Kind of new to the whole bug thing... is there a known latest version that works correctly?

[curtiscarlson]

Took an hour or so to test this out and the last working version is indeed the 1.11.0.

[mischnic]

Because of your public/index.html and public/build/index.js setup, you need to use
parcel build --public-url build ... (because the root for Parcel's output isn't "/" on your server).

Another possibility is to let parcel run over the index.html file and include the source index.js.

@devongovett Is this considered a regression?

[curtiscarlson]

@mischnic can you be more specific? I look smarter than I am...

[mischnic]

can you be more specific?

@curtiscarlson Sorry 😄

In the repo you posted, these scripts are defined:

  "scripts": {
    "watch": "parcel src/js/app.js --out-dir public/build",
    "build": "parcel build src/js/app.js --out-dir public/build"
  },

you could change them to be:

  "scripts": {
    "watch": "parcel src/js/app.js --out-dir public/build --public-url build",
    "build": "parcel build src/js/app.js --out-dir public/build --public-url build"
  },

The other alternative:

- parcel-minimal
  |-src
    |- index.html
    |- js
      |- app.js

then include your script in the html file:

    <script src="./js/app.js"></script>

and run parcel on the html file: parcel build src/index.html --out-dir build (this will create a different folder structure in build compared to your public version, but behaves the same.

[thsorens]

Im also struggling with this issue. Only with my css though, running windows.

    "build": "parcel build ./ClientApp/index.js -d wwwroot/dist/ -o quest-client --no-source-maps --log-level 3 --public-url ./dist",

This works fine for everything except the scss files that references fonts. The css file is built into dist, but it will reference the assets from dist/dist. If setting the public-url to ./, the fonts will work, but then, all other assets on the page gets broken, since they are not served at root. This problem started after bumping from 1.11.x to 1.12.x.

The bundle is running on a .net core server, thats the reason for that wwwroot path

[mischnic]

@thsorens Could you please open a new issue with a reproduction?

[curtiscarlson]

@mischnic
I tried the first solution and it doesn't work, it just crashes saying "× No entries found.". It says to check the logs but its all nonsense and no help. The second solution doesn't work for me because I don't want index.html outside of the public folder. Little help?

[curtiscarlson]

@mischnic OK there was an issue with copying/pasting your code into my file, but when I manually typed it out, it worked. Here's the issue now. When I use parcel resources/js/app.js --out-dir ./public/build --public-url build it looks for the css in server.com/build/build/file.css ...although the built css is indeed getting placed into public/build.....something still isn't right

[curtiscarlson]

@mischnic and anyone else reading, i figured it out, the correct code is parcel resources/js/app.js --out-dir ./public/build --public-url /build

[curtiscarlson]

I would like to reopen this as a bug. It still does not work. The problem is that if I have a path like /something/something and I navigate from there from '/' in my SPA, everything is fine. But if I hit refresh once I am there, it looks for the bundle in /something/build even though the SPA is serving the content normally found at '/' using the virtual router. I hope I am explaining myself clearly enough.

[curtiscarlson]

I got this sorted. Based on how the new version works I needed to update my html. It was mostly working so I was convinced it had to be a javascript thing. Thank you.