Parcel: HMR for CSS doesn't refresh on subsequent entry pages and can also throw an error

[gregorybolkenstijn]

🐛 bug report

HMR for CSS doesn't refresh on subsequent entry pages and can also throw an error.

🎛 Configuration (.babelrc, package.json, cli command)

I created a repository to reproduce the error: https://github.com/gregorybolkenstijn/parcel-issue-hmr
Steps to reproduce the issue:

1. Clone the repository and run yarn
2. Run yarn start
3. In main.scss change the h1 background color to something else like blue.
4. The h1 background color gets refreshed via HMR
5. Navigate to index2.html
6. In main.scss change the h1 background color to something else like orange.
7. No visible changes, you have to reload to see the changes

I've noticed changes in HTML and JS do show, only CSS changes don't. I've seen that CSS HMR only works on the first file Parcel encounters. If you run yarn start-glob, you'll notice the CSS changes only show on home.html, not index.html or index2.html. Probably because home.html comes first alphabetically.

I have this problem as well in a more complex project with PostHTML and PostCSS transforms. The same setup is throwing an error instead of not refreshing the CSS:

app.ef966a9d.js:39 Uncaught Error: Cannot find module '../../../node_modules/parcel-bundler/src/builtins/css-loader.js'
    at newRequire (app.ef966a9d.js:39)
    at newRequire (app.ef966a9d.js:23)
    at localRequire (app.ef966a9d.js:54)
    at Object.eval (eval at hmrApply (app.js:1), <anonymous>:4:17)
    at newRequire (app.ef966a9d.js:48)
    at hmrAccept (app.js:1)
    at app.js:1
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (app.js:1)

🤔 Expected Behavior

Hot reloading works on all pages for all HTML, CSS/SCSS and JS changes.

😯 Current Behavior

Doesn't refresh on subsequent pages for CSS/SCSS changes.

💻 Code Sample

https://github.com/gregorybolkenstijn/parcel-issue-hmr

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 10.8.0
| npm/Yarn | 6.2.0 / 1.9.2
| Operating System | 6.2.0 / 1.9.2

[DeMoorJasper]

This is strange globs get parsed on init and get transformed into normal assets, so they should just do exactly the same as non globs

[gregorybolkenstijn]

If this is strange, I can see if I can setup a repo to reproduce the issue?
I was hoping it's something in my configuration.

[DeMoorJasper]

It might be, just haven't had this issue myself

[gregorybolkenstijn]

@DeMoorJasper I updated the bug report and title because I narrowed down the bug. I also made a repository so you can easily reproduce the bug. Hope this helps.

[LeanderVanBaekel]

i have this issue as well

[georgecrawford]

I'm suffering from the same. The first listed entrypoint (this affects arrays of filepaths, so it's not a glob-specific issue) receives JS which contains the CSS HMR code (css-loader.js, etc.), but all subsequent entrypoints do not.

Indeed, it seems that the first entrypoint gets _another JS file_ to the one specified in the source HTML - i.e. in an HTML file with a single <script> and a single <link>, the compiled HTML has _two_ JS script blocks - the first missing CSS HMR code, and the second containing it. Subsequent entrypoints only get the first JS block, and thus have no CSS HMR. @DeMoorJasper I know you're busy with v2 (exciting!), but do you have any thoughts on what might be happening? I can send the compiled files if necessary, or put up a test case.

[georgecrawford]

I should have said - this is affecting me on v1.10.3.

[georgecrawford]

I've created a reduced test-case, with two HTML files. Loading the second of these, I don't get CSS HMR. When I save the CSS file a couple of times, I then see a console error similar to @gregorybolkenstijn: Cannot find module 'node_modules/parcel-bundler/src/builtins/css-loader.js'. This is because the loaded JS file doesn't contain the CSS HMR code. The first HTML file has _two_ <script> tags, loading a JS bundle both without, and with, the CSS HMR code.

[georgecrawford]

Test case here: https://github.com/georgecrawford/parcel-entryfile-bug. This is as reduced as it could possibly be.

[georgecrawford]

Digging into the different between the treatment of 1.html and 2.html. I'll report my findings here.

https://github.com/parcel-bundler/parcel/blob/1.x/src/Bundler.js#L642 - at this point, asset.parentBundle is null for 1.html, plus all of its assets (main.css, css-loader.js, bundle-url.js, and main.js). It is also null for 2.html, but for the two assets (main.css and main.js) asset.parentBundle is set. Hence the createBundleTree() exits at https://github.com/parcel-bundler/parcel/blob/1.x/src/Bundler.js#L654.

I have no idea yet of the logic behind parentBundle, but since these two entrypoints are distinct, they should be treated the same in this respect, I'd have thought.

[georgecrawford]

If the two HTML files don't share a CSS file, but instead reference different CSS files, the bug goes away. It's the shared nature of the CSS which causes the problem.

[amypellegrini]

I'm having this very same problem too, but I cannot even see one of the pages in the first place. The html is served fine, but without styles.

[marc136]

I think this issue is related to #2340, which won't be fixed before parcel 2 (see #2372)

[davibe]

I have 3 independent pages that are linked from an index.html. Only one of the page imports a css file from a node modules. The other pages do not import any css. I can experience this bug (the import css exception) as long as i keep index.html around (i build with parcel index.html). If I remove it and build the pages independently they work fine (with parcel *.html)
Of course I do need the index.html

[humphd]

I've got this with no explicitly shared CSS: one index.html that has 2 links to pages that both import Vue, but share nothing else.

[github-actions[bot]]

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.

[timfee]

If the two HTML files don't share a CSS file, but instead reference different CSS files, the bug goes away. It's the shared nature of the CSS which causes the problem.

I wonder if that's causing the issues with two HTML files using the same partial:

@font-face {
  font-family: 'fontello';
  src: url('./assets/fontello.eot?50759127');
  src: url('./assets/fontello.eot?50759127#iefix') format('embedded-opentype'),
    url('./assets/fontello.woff?50759127') format('woff'),
    url('./assets/fontello.ttf?50759127') format('truetype'),
    url('./assets/fontello.svg?50759127#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}