parcel: Can't find css-loader

I have this problem when I try to start with multiple sources and have the posthtml-include module active.

Solved by changing "start": "parcel src/*.html" to: "start": "parcel src/NAME.html" and working on one page at a time.

Not ideal, as working on multiple pages is a very common thing to do.

Same issue here with an Scss file. I’m using parcel 1.12.4 and serve the files with the custom express server (a hard requirement for this project) which serves the dist folder as well as doing some API handling.

HTML and JS HMR works, CSS is throwing the same css-loader error.

Following @Bauerpauer’s idea I’ve patched parcel-bundler (using patch-package) and it seems to be working fine.

The two differences to my approach:

1. I only had to patch JSPackager
2. I’ve pushed this code higher under the if (this.options.hmr) check

diff --git a/node_modules/parcel-bundler/src/packagers/JSPackager.js b/node_modules/parcel-bundler/src/packagers/JSPackager.js
index a07ff3b..8adcc67 100644
--- a/node_modules/parcel-bundler/src/packagers/JSPackager.js
+++ b/node_modules/parcel-bundler/src/packagers/JSPackager.js
@@ -216,6 +216,12 @@ class JSPackager extends Packager {
       );
       await this.addAssetToBundle(asset);
       entry.push(asset.id);
+
+      let cssLoaderAsset = await this.bundler.getAsset(
+        require.resolve('../builtins/css-loader')
+      );
+      await this.addAssetToBundle(cssLoaderAsset);
+      entry.push(cssLoaderAsset.id);
     }
 
     if (await this.writeBundleLoaders()) {

@liviudobrea Just wanted to clarify not all of those are ways forward.

---

one of them is that of letting go of hmr and manually refreshing

That is sacrificing one of the major features of Parcel.js. It’s #2 on the Features page. I don’t see that as an acceptable way forward.

or setting up a webpack boilerplate with manual hmr integration of your choice

Again, suggesting to use a completely different alternative to Parcel.js is not a way forward. That’s self-explanatory.

better one would be debugging the parcel builders and trying to figure out a fix for the issue

Hence, we arrive at #2936 in order to debug this issue and address it at the root. Which is why we’re all here.

Indeed it would disable Hmr, as I have mentioned. You have therefore multiple ways going forward, one of them is that of letting go of hmr and manually refreshing. Another better one would be debugging the parcel builders and trying to figure out a fix for the issue, or setting up a webpack boilerplate with manual hmr integration of your choice. Best of luck.

I had this issue and solved it by importing the css/scss file into a javascript file.

Inside index.js import '../scss/main.scss';

I also run into this error. Removing dist or .cache folder does not solve it. I use multiple HTML pages, index.html links - with iframes embedded - to the other pages. If starting with index.html without linking to the other pages - which also include the same CSS files - there is no error.

With linking to the other pages, including also those CSS files, I ran into that error.

Running serve with a subpage as endpoint, then the error does not appear. But if I navigate to another endpoint page it appears too.

Notice: if starting a page - which is not linked with the other pages, there is no error. So embedding direct links causes those error - when navigate to another endpoint, which is “connected” to each other.

Even I had the same issue, first I installed parcel globally npm install -g parcel-bundler but later I uninstalled Parcel globally and installed it in my local project directory npm install parcel-bundler then I started seeing this issue:

ENOENT: no such file or directory, open ‘/Users/user/.nvm/versions/node/v10.11.0/lib/node_modules/parcel-bundler/src/builtins/css-loader.js’

Here is the simple solution: just remove .cache and dist folder and run npm start again. This should fix the issue.

My package.json:

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "My Project to explain Parcel issue",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "Syed Haroon",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.3"
  }
}

parcel 2 on a recent project and had even more problems there

What did you run into?

More problems, by the sounds of it…

I am getting this issue with 1.12.4 too. My build script is a simple parcel build index.html and my css import is done through the link tag. Nothing in the thread really helps me.

Removing .cache and dist folder fixes the problem for me (It happens really rare and i always forgot what should i do 😄)

The error i was having is this

Server running at http://localhost:1234 
🚨  /xxx/node_modules/parcel-bundler/src/builtins/css-loader.js: ENOENT: no such file or directory, open '/xxx/node_modules/parcel-bundler/src/builtins/css-loader.js'
Error: ENOENT: no such file or directory, open 'xxx/node_modules/parcel-bundler/src/builtins/css-loader.js'

@liviudobrea Wouldn’t that prevent automatic reloading on file-save (aka HMR), thereby negating one of the main features of Parcel.js with running parcel index.html in the first place?

At that point, you may as well just run parcel build index.html since that just produces the production-ready package directly without the need for HMR at all. In this case, I’m not sure --no-hmr is a workaround as much as a completely separate process.

the issue is still here :sad:

Thanks @emirotin! I didn’t know about patch-package - that’s gonna save me a lot of frustration! I tried moving to parcel 2 on a recent project and had even more problems there - so I’m sticking w/ 1.12.4 for the forseable future.

I have this issue too. the solution from @Trollhag doesn’t work for me. Is this gonna be fixed soon ?

what is the status on this?

Your best bet to quickly fix it now is to use my patch and https://www.npmjs.com/package/patch-package You do it once and it just works

Thanks, it works! Appreciate taking your time looking into this and posting the solution. Parcel was supposed to be an easy thing. Ended up spending more time on it than webpack

what is the status on this?

Your best bet to quickly fix it now is to use my patch and https://www.npmjs.com/package/patch-package You do it once and it just works

Solved by changing "start": "parcel src/*.html" to: "start": "parcel src/NAME.html"

I managed to get this to work as well; parcel src/{file,file2,file3}.js

Still not ideal, but better than working on a single file at the time.

Removing .cache has no effect for me. I don’t have a dist folder. Also, @Stradivario’s reported error is not the same as the one I’m experiencing (reported by @bichotll, @billcolumbia). Seems like there are 2 separate problems here.

I dug into this today and found that the following changes make css hot reloading work again, at least for the sample repo posted by @billcolumbia above. I don’t know the project well enough to describe my change to JSPackager.js, but I found that my change injected the module that the error is yelling about. The change to css-loader.js was necessary because bundle.getBaseURL(links[i].href) was returning http://localhost:8000/dist/css on each iteration and bundle.getBundleURL() returned http://localhost:8000/dist/js, preventing updateLink from ever being called.

Hopefully this can lead someone in the the direction of a proper fix, because this is definitely a hack 😉

index 819700f..d00c9bf 100644
--- packages/core/parcel-bundler/src/builtins/css-loader.js
+++ packages/core/parcel-bundler/src/builtins/css-loader.js
@@ -18,9 +18,9 @@ function reloadCSS() {
   cssTimeout = setTimeout(function () {
     var links = document.querySelectorAll('link[rel="stylesheet"]');
     for (var i = 0; i < links.length; i++) {
-      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
+      //if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
         updateLink(links[i]);
-      }
+      // }
     }
 
     cssTimeout = null;
diff --git packages/core/parcel-bundler/src/packagers/JSPackager.js packages/core/parcel-bundler/src/packagers/JSPackager.js
index a07ff3b..c260b7b 100644
--- packages/core/parcel-bundler/src/packagers/JSPackager.js
+++ packages/core/parcel-bundler/src/packagers/JSPackager.js
@@ -218,6 +218,12 @@ class JSPackager extends Packager {
       entry.push(asset.id);
     }
 
+    let cssLoaderAsset = await this.bundler.getAsset(
+      require.resolve('../builtins/css-loader')
+    );
+    await this.addAssetToBundle(cssLoaderAsset);
+    entry.push(cssLoaderAsset.id);
+
     if (await this.writeBundleLoaders()) {
       entry.push(0);
     }