Incorrect dependency resolution after update in watch mode with public-url about parcel-plugin-custom-dist-structure

[VladimirMikulic]

Hi, again @imamatory.
You won't believe me but there is no issue here.
It's just how the stuff works. Let me explain.

Each time you make a change to the source file, Parcel outputs that file in the root of the dist folder, my plugin runs and places it into the folder that you've defined in package.json.
After the plugin had placed the file in its folder, it needs to replace the Parcel file references with the correct file references. In our case, the HTML file has links to CSS and JS files.

You are using serve to serve those files and here comes the tricky part.
Sometimes, the plugin places the file in the correct folder but serve detects those changes and runs before my plugin has finished updating the file links.

That's why you see the error in the console. If you look at the compiled dist file, you'll see that the file links are just right!

I've read the serve documentation and there is no way we can delay the serve to run let's say 200ms after each change. The good news is that we can use rewrite rules to get the result we want. Add these to the existing rewrites array and enjoy.

   {
      "source": "/static/*.css",
      "destination": "./assets/styles/:filename"
    },
    {
      "source": "/static/*.js",
      "destination": "./assets/js/:filename"
    }

Thank you for setting up the demo project and hopefully, this clears all your doubts :)

[VladimirMikulic]

Seems like a problem related to development mode. I'll try my best to provide a patch as soon as possible.

[VladimirMikulic]

Hi @imamatory.
The patch has been published. Could you please try it by following these steps again?

1. Clone the project: git clone https://github.com/VladimirMikulic/parcel-plugin-custom-dist-structure.git
2. Check out the test branch: git checkout fix/incorrect-path-links
3. Install dependencies: npm i
4. Make it available globally on your system: npm link
5. After running npm link, you'll get the absolute path to the package -> copy it
6. Enter your project and run npm i -D <absolute_path> to install the plugin (before this, make sure to delete the version from NPM)
7. Report the results here

Thank you.

[imamatory]

Hi, @VladimirMikulic.
Thank you for quick reply.
Font reloading have been fixed now. But it caused another import resolution's issue when there is a hot update by pug template. After hard page reload style link is fine, the issue only appears after hot update.

/static/common.048d1b14.css instead of /static/assets/common.048d1b14.css

I will try to provide complete folder and import structure to describe the new issue:

├── layout
│   └── layout.pug
└── public
    ├── common.scss
    ├── index.pug

layout/layout.pug

...
    link(href="/common.scss" rel="stylesheet")
...

public/index.pug

...
    extends ../layout/layout.pug
...

[VladimirMikulic]

Hi @imamatory. No problem.
By "hot update", are you referring to HMR (hot module reloading)?

[imamatory]

I meant HMR but then i looked in dev tools and realized that this is live reload (hard page reload triggered by js).
Also not every update breaks css and js files urls. It seems like it happens randomly.

[VladimirMikulic]

Does this happen with this patch only or with NPM v1.1.10 as well?
It's a bit strange that it breaks randomly. I haven't used pug but I'll set up something to try to emulate your setup and identify the bug.

[imamatory]

It's strange how i didn't see this earlier but this happens in v1.1.10 as well.
Also manual page reload always works correctly. Only "automatic" updates sometimes breaks css and js links.

The current issue with fonts has been fixed. Now we can open a new one and i can try to create a repo to demonstrate new issue.

[VladimirMikulic]

@imamatory that would be very helpful and would make a fixing process quicker.
We can still keep this issue open, without opening a new one since this is again related to development mode.

Let me know when you set up the repo 👍

[imamatory]

Here the repo. You can read description in readme to reproduce issue

[VladimirMikulic]

Awesome, thank you! I'll let you know when I fix this.

[imamatory]

Wow you found this!
But as i know serve doesn't implement live reload, it just serves static. Updates provided by parcel. If i start parcel with option --no-hmr updates won't trigger reload at all. Also i use serve just for this example, in my real project run django server but it also doen't trigger reload.

Maybe i'm missing something? What can we do?

[VladimirMikulic]

You are right, serve doesn't implement live reload it's Parcel's feature.

In Node.js we have a package called nodemon that does reloading on file change for us (server-side).
I've found this for Django.

Your server-side stack is Python so you have to use Python tools :)

[imamatory]

Ok i got it about custom watcher. I just wonder why parcel don't wait until this plugin completes its work. Is this caused by parcel plugins architecture?

[VladimirMikulic]

That's correct. Due to Parcel architecture and the way plugins are run, it's not possible.

[imamatory]

I've decided that my project already too complex for parcel so i switched to webpack. But i'd learned some tricks with parcel and realized that it can be used for simple projects very easy.
I think issue solved.

Thanks for helping!

[VladimirMikulic]

@imamatory thank you for informing me.
I am glad that I was able to help you and teach you a few tricks ;)
This was a good issue that enhances my plugin capabilities and thank you for this!

Since your project is complex, I agree that Webpack is better.
It's more mature and battle-tested than Parcel.

Good luck with your project!