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

Describe the bug Got /static/fonts/MyFont.b9974724.woff instead of /static/assets/fonts/MyFont.b9974724.woff after save any css file in watch mode. Parcel started with --public-url=/static/. Initial build generates correct url for the font and all works fine until i save any css file.

I have project structure like this:

├── fonts
│   └── MyFont
│       ├── MyFont.woff
│       └── MyFont.scss
└── public
    ├── common.scss
    ├── index.pug

public/common.scss

@import url("../fonts/MyFont/MyFont.scss"); // "url" used to set relative path resolving from current dir instead of parcel entry file dir

fonts/MyFont.scss

@font-face
    ...
    url("./MyFont.woff")

Desktop (please complete the following information):

  • OS: Linux
  • Parcel version: v1.12.4
  • Plugin version: v1.1.10

Plugin configuration object:

    "config": {
      "pages": [
        ".html"
      ],
      "assets/js": [
        ".js",
        ".js.map"
      ],
      "assets/styles": [
        ".css",
        ".css.map"
      ],
      "assets/images": [
        ".jpg",
        ".png"
      ],
      "assets/fonts": [
        ".woff",
        ".woff2",
        ".eot"
      ]
    },
    "options": {
      "development": true
    }
  }

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (10 by maintainers)

Commits related to this issue

Most upvoted comments

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 😃

+1
VladimirMikulic on May 9, 2020
Read more comments on GitHub
← uwsm: autostart services don't inherit env vars from compositor
parcel-plugin-custom-dist-structure: Maximum call stack size exceeded →