Parcel: background-image css rule raises "Uncaught (in promise) Error: Cannot find module" in console

[targumon]

Choose one: is this a 🐛 bug report or 🙋 feature request?
This is a 🐛 bug report.

🎛 Configuration

Here's the smallest reproducible configuration. No .babelrc, just 3 simple files:
index.html - <link rel="stylesheet" href="index.css"> in head and <div>hi</div> in body.
index.css - div { background: url("bg_diag.png"); }
bg_diag.png -

🤔 Expected Behavior

Clean console

😯 Current Behavior

http://localhost:1234/ seems okay (there's a single network request and the page loads with that background-image for the div element).
However, there's an error in console:

Uncaught (in promise) Error: Cannot find module '6b40fa7fa533b048cde070004da2b0e1.png,4'
    at newRequire (css-loader.js:30)
    at newRequire (css-loader.js:22)
    at localRequire (css-loader.js:30)
    at css-loader.js:30
    at <anonymous>

🌍 Your Environment

"devDependencies": {
  "parcel-bundler": "^1.6.2"
}

| Software | Version(s) |
| ---------------- | ---------- |
| Node | v8.9.4
| npm | 5.6.0
| Operating System | Chrome on macOS

[benhutton]

I'm seeing something very similar when trying to get hmr working with the latest parcel version.

[xiemingzhang]

[mischnic]

Some findings:

function newRequire(name){
    ...
    console.log(name)
    ...
}

// prints
12
0
13
11
["a34b5839f12b33bc85271b84ecf5f50f.png", 8]
["a34b5839f12b33bc85271b84ecf5f50f.png", 8]

This doesn't seem right (sometimes array, sometimes number).

Content of modules: {0: Array(2), 4: Array(2), 7: Array(2), 11: Array(2), 12: Array(2), 13: Array(2)} - there is no 8.

[realdennis]

I just add import 'index.css'in entry js,
and remove the<link rel="stylesheet" href="index.css"> to resolve this issue.

[targumon]

@realdennis good for you! ^_^
My use case is with HTML as entry point, not JS.

[realdennis]

@targumon I mean that if you have <script src="index.js"></script> in your HTML, you can addimport '...css' in the top of index.js , but also use command parcel index.html, roundabout but it worked for me.

[skotniczny]

The last version without this error is 1.4.1

The loadBundles function expects the last element of the bundles array to be id, but here is none: b.load([["826be0cf9f71003d0ee36613d0e795f9.png",6]])

[kaishiro]

Just confirming that this is a bug for me in 1.7.1 and I can verify what @skotniczny said that 1.4.1 is the last version where this works correctly for me.

[davidnagli]

@devongovett @DeMoorJasper Guys this looks like a regression!! I ran into this when using Parcel myself 😟

I did some digging and the root cause of the issue (the reason why it works inv1.4.1 but not v1.5.0) is, unsurprisingly, because 1.5.0 is when we first introduced CSS HMR: #128. I guess the initial implementation didn't account for CSS child assets or something 🤷‍♂️ (not sure, didn't get a chance to investigate in-depth)

The repro for this issue is pretty easy, but I added mine to my parcel-issue-repro if you wanna just use that to make your life easier.

For anybody else running into this issue looking for a quick fix: Run Parcel with the --no-hmr flag

[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.