Can't find css-loader

[captDaylight]

Error: ENOENT: no such file or directory, open '/Users/paulchristophe/projects/return-interface/node_modules/parcel-bundler/src/builtins/css-loader.js'

Configuration was working then all of a sudden stopped. I've tried removing my node_modules and re-installing but no dice.

[arjamizo]

just apply those changes to your package.json

-    "node-sass": "^4.11.0",
-    "parcel-bundler": "^1.12.3",
+    "node-sass": "4.11.0",
+    "parcel-bundler": "1.12.3",

and of course remove package-lock.json so it can get recreated it using yarn,
if using nvm use npx yarn install or npx npm install or npx pnpm install

[DeMoorJasper]

@arjamizo parcel does not rely on node-sass and sass is more reliable

_{Sent with GitHawk}

[liviudobrea]

Also getting this with parcel@1.12.3, however this is not consistent, sometimes it will run, while at random times fail. Running with option --no-hmr seems to fix it. Therefore, I would use react-hot-loader manually untill fixed.

[brian32768]

Removing node-sass and reinstalling sass worked for me.

[rdhar]

Is this the same issue as #1931? I'm getting this same error on a project without any Sass; only one Stylus file so I doubt node-sass is to blame here.

[bichotll]

Having the same issue here. I couldn't figure out what is going on nor make it work.

Here the full error:

src.e31bb0bc.js:37 Uncaught (in promise) Error: Cannot find module '../node_modules/parcel-bundler/src/builtins/css-loader.js'
    at newRequire (src.e31bb0bc.js:37)
    at newRequire (prerelease.1b813e5e.js:29)
    at newRequire (prerelease.1b813e5e.js:21)
    at localRequire (prerelease.1b813e5e.js:53)
    at Object.parcelRequire.../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css._css_loader (jquery.js:10365)
    at newRequire (prerelease.1b813e5e.js:47)
    at localRequire (prerelease.1b813e5e.js:53)
    at Object.parcelRequire.index.js.jquery (index.js:2)
    at newRequire (prerelease.1b813e5e.js:47)
    at localRequire (prerelease.1b813e5e.js:53)

[theashguy]

I'm seeing this too. Happens during HMR, console message is in the browser. why would it be trying to resolve that path in the browser? or is this just an error being bubbled up over the websocket connection...

Attempting a rollback of the parcel package to see if I can get a working version.

[bichotll]

Please let us know if you solve this issue. I still couldn't find a solution.. Thanks

…

On Sat 1 Jun 2019, 05:06 Ash Guy, ***@***.***> wrote: I'm seeing this too. Happens during HMR, console message is in the browser. why would it be trying to resolve that path in the browser? or is this just an error being bubbled up over the websocket connection... Attempting a rollback of the parcel package to see if I can get a working version. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2936?email_source=notifications&email_token=AAE5CHYBC4DDJIEQJ5UULY3PYHRTFA5CNFSM4HG7XLC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWXLTI#issuecomment-497907149>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAE5CH4NX3A7VMDMV5SF6F3PYHRTFANCNFSM4HG7XLCQ> .

[liviudobrea]

For the people who are struggling with this, just run parcel without hmr 'parcel run FILENAME - -no-hmr'.

However, by doing this you won't be able to hook into the hot module as it is going to be disabled.

[bichotll]

I will try. Thanks for your help.

…

On Sat 1 Jun 2019, 11:47 Liviu Dobrea, ***@***.***> wrote: For the people who are struggling with this, just run parcel without hmr 'parcel run FILENAME - -no-hmr'. However, by doing this you won't be able to hook into the hot module as it is going to be disabled. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2936?email_source=notifications&email_token=AAE5CH52SYEATTB7GOYUJR3PYJARXA5CNFSM4HG7XLC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWW47PI#issuecomment-497930173>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAE5CH7V5AXAXMCGWLX7ENTPYJARXANCNFSM4HG7XLCQ> .

[rdhar]

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

[liviudobrea]

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.

[rdhar]

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

[mischnic]

The only way to debug this issue is with some kind of reproduction.

[billcolumbia]

I'm running into this issue. Feel free to clone this and give it a shot.

JS reloads fine, CSS does not. Console log - Error: Cannot find module '../node_modules/parcel-bundler/src/builtins/css-loader.js'

Tried poking for a while to no avail. Hopefully this repo helps.

[mischnic]

With that repo, changing the JS code throws "Uncaught SyntaxError: Unexpected end of input" (because it reloades too quickly before it's completely bundled?). That works again when import 'babel-polyfill' is removed

Changing the CSS does log that error

Using parcel's integrated dev server works as well.

This happens because the HMR runtime is packaged into a seperate JS file that isn't being loaded because Parcel is being used to bundle only specific files (e.g. parcel watch src/index.js src/style.css). This isn't ideal because you can't know if some extra scripts need to be loaded for HMR to work.

[Bauerpauer]

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);
     }

[syed-haroon]

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"
  }
}

[Stradivario]

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

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'

[rdhar]

@syed-haroon and @Stradivario: With your fix applied (i.e., once you've deleted those folders), is the issue resolved permanently or does it still return occasionally?

[Bauerpauer]

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.

[mischnic]

@Bauerpauer Could you please post your code?

[billcolumbia]

I posted a repo above in this thread to reproduce the issue

…

On Jun 30, 2019, at 4:08 AM, Niklas Mischkulnig ***@***.***> wrote: @Bauerpauer Could you please share a reproduction? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[syed-haroon]

@syed-haroon and @Stradivario: With your fix applied (i.e., once you've deleted those folders), is the issue resolved permanently or does it still return occasionally?

Did not get the error so far. It's been like a week now.

[christian-beckmann]

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.

[laurenthiernard]

I have had the same problem and found the origin of it.
At the beginning I was building one page at a time. When I decided to have them linked on an index.html as an entry point for parcel to process everything, this issue appeared.
What I did is put a quick styling into a <style>...</style> tag on that page which was causing this 'builtins/css-loader.js' annoying error. All the other pages are associated with my main scss file otherwise.
I would think it's more of a syntax error than a problem linked to the modules

[Bauerpauer]

@lucaorio see my post w/ the diff above. Since I don't want to fight with trying to get Webpack working for my non-standard use case I've just been editing those 2 files to get CSS hot reloading working again.

[cdll]

same issue here~

[Trollhag]

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.

[mcmire]

I am getting this as well. Does anyone know if this problem is fixed in v2?

[benavern]

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

[ConstantinChirila]

Sorry to pile on, but the issue still happnes.

[c01nd01r]

Have this issue with style tags <style></style> in *.vue files.

[emirotin]

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()) {

[Bauerpauer]

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.

[mischnic]

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

What did you run into?

[rdhar]

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

What did you run into?

More problems, by the sounds of it...

[Bauerpauer]

@mischnic Sorry, I don't remember, it's been a few months and was in a rush, had to switch back to old version. If I run into 'em again I'll let ya know.

[tadinski]

what is the status on this?

[emirotin]

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

[tadinski]

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

[heggemsnes]

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

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

[JackMorganNZ]

Is this issue planned to be fixed, or is it being left to be addressed in version 2? (if it's fixable there)

[flowen]

I run into this error with any of the new CSS functions (e.g. min() max() clamp()) used in plain .css files.

I've seen different issues (but caused by a similar situation) in other packages where these (new) native functions don't mix with existing SASS functions.

I'm sorry I can't figure out if that's the actual case here, but this might help.

[cdll]

the issue is still here :sad:

[PanuGr]

Hi,
I am also getting this issue. I import my scss stylesheet from a .js file but I am getting this error when I try to add some css rules with a <style> tag.
A patch that is mentioned above feels overwhelming. Parcel was supposed to be easy and I am a beginner at this. I guess I will not add the <style> tag after all.

By the way, many people above mention using parcel 1.12. When I installed it, I got version 1.3.1. Is that some unstable version?

[danieldafoe]

@PanuGr I also have this problem–currently running version 1.12.4. Perhaps you're onto something with the version.

[eriksachse]

I have the same problem. Caused by

import "./font_1.css";
import "./font_2.css";
import "./styles.css";

When I comment this line out, the error disappears and executes the following JS code.
Edit: Using

    <link rel="stylesheet" href="src/font_1.css" />
    <link rel="stylesheet" href="src/font_2.css" />
    <link rel="stylesheet" href="src/styles.css" />

Solves the error in the meantime.
Parcel 7.2.0

[adityamore]

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.

[peterkos]

Same issue here, Parcel 1.12.4; unfortunatley @emirotin's patch does not work for me :(

Might try to update to Parcel 2 but that will need a good chunk of a refactor to do so

[palachX]

Hello guys, i don't how, but i solved this problem
This my steps

1. delete directory node_modules

2. delete package-lock.json

3. npm install npm@latest -g

4. npm install && npm install node-sass && npm install parcel

5. Set u package.json script:
   "scripts": {
   "build": "parcel build index.html",
   "dev": "parcel index.html --open",
   "start": "npm run build && npm run dev",
   "test": "echo "Error: no test specified" && exit 1"
   }

6. npm start

When u start 7 event npm must install :
"@parcel/packager-raw-url": "^2.7.0",
"@parcel/transformer-webmanifest": "^2.7.0"

And u package.json should become this screen

I hope I helped you in solving your problem.