Fix 'unreadable file error' in watch mode after a save in vscode

[marcosbozzani]

This fix detects 'File to read not found or unreadable' and 'File to import not found or unreadable' errors that occasionally happens after a file save in Visual Studio Code when node-sass is running on watch mode.

If those errors are detected, a retry mechanism is applied. It verifies that the file actually exists and limits the maximum number of retries to 1000. In my local tests, it usually takes less than 5 retries. The limit is there as a safety measure to prevent infinite recursion and the value is high enough for those cases where the machine is really slow or it has to access a storage with high latency, like a remote one.

Those errors happen with 'node-sass (watch mode)', 'chokidar + node-sass' and 'node-sass-chokidar (watch mode)' too.

It is also possible to change the retry mechanism for one with exponential backoff. For example:

Change this code:

if (isFileUnreadable(error) && retries < 1000) {
      retries++;
      sass.render(renderOptions, renderCallback);
}

For this one:

if (isFileUnreadable(error) && retries < 4) {
      retries++;
      setTimeout(() => sass.render(renderOptions, renderCallback), Math.pow(retries, 5));
}

Related issues:
#1894
#2022
microsoft/vscode#20491
facebook/create-react-app#2531
michaelwayman/node-sass-chokidar#14
michaelwayman/node-sass-chokidar#22
https://stackoverflow.com/questions/50395998/vscode-wont-work-with-filewatchers

[xzyfer]

I don't believe this is the correct place for this patch. The issue is the lack of atomic saving in some editors. The correct place to patch this is in the watchers themselves i.e. gaze, and chokidar. Node Sass is moving to chokidar which has better support for handling this situation.

…

On Fri., 18 May 2018, 2:52 pm Marcos, ***@***.***> wrote: This fix detects 'File to read not found or unreadable' and 'File to import not found or unreadable' errors that occasionally happens after a file save in Visual Studio Code when node-sass is running on watch mode. If those errors are detected, a retry mechanism is applied. It verifies that the file actually exists and limits the maximum number of retries to 1000. In my local tests, it usually takes less than 5 retries. The limit is there as a safety measure to prevent infinite recursion and the value is high enough for those cases where the machine is really slow or it has to access a storage with high latency, like a remote one. Those errors happen with 'node-sass (watch mode)', 'chokidar + node-sass' and 'node-sass-chokidar (watch mode)' too. It is also possible to change the retry mechanism for one with exponential backoff. For example: Change this code: if (isFileUnreadable(error) && retries < 1000) { retries++; sass.render(renderOptions, renderCallback); } For this one: if (isFileUnreadable(error) && retries < 4) { retries++; setTimeout(() => sass.render(renderOptions, renderCallback), Math.pow(retries, 5)); } Related issues: #1894 <#1894> #2022 <#2022> microsoft/vscode#20491 <microsoft/vscode#20491> facebook/create-react-app#2531 <facebook/create-react-app#2531> michaelwayman/node-sass-chokidar#22 <michaelwayman/node-sass-chokidar#22> https://stackoverflow.com/questions/50395998/vscode-wont-work-with-filewatchers ------------------------------ You can view, comment on, or merge this pull request online at: #2386 Commit Summary - Fix 'unreadable file error' in watch mode after a save in vscode File Changes - *M* lib/render.js <https://github.com/sass/node-sass/pull/2386/files#diff-0> (25) Patch Links: - https://github.com/sass/node-sass/pull/2386.patch - https://github.com/sass/node-sass/pull/2386.diff — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2386>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWPfZzTqnLAiuU17E5Q2TFKJDvCN5ks5tzsQEgaJpZM4UErtJ> .

[marcosbozzani]

Sorry if I wasn't clear enough in the PR. I know it's not node-sass fault. Yet this cause a very annoying issue for node-sass users. This could serve as a temporary workaround that could be removed once the real issue was solved. It doesn't affect those editors that do that right thing and mitigate the problem until the other editors can be fixed.

Chokidar fails as well (chokidar + node-sass and node-sass-chokidar), as you can see in the related issues. 😕

I'm just sharing the solution that worked for me, so anyone can use it. 😉

If this is really not the right place for this patch, I'm sorry for the trouble. 😅

[maartenraes]

@marcosbozzani worked for me by replacing the file localy, many thanks! 👍

[derek126]

This would be great to have. This issue is very annoying.

[seradork]

In my environment it did not work well.
I modified it as follows and it worked.

line 126-129:

    if (unreadable) {
      var dir = path.dirname(error.file);
      var file = error.message.split('not found or unreadable: ')[1].trim().slice(0,-1);
      var fileDir = path.dirname(file);
      var fileName = path.basename(file);
      return (
        fs.existsSync(path.join(dir,fileDir,fileName)) ||
        fs.existsSync(path.join(dir,fileDir,"_" + fileName)) ||
        fs.existsSync(path.join(dir,fileDir,fileName + ".scss")) ||
        fs.existsSync(path.join(dir,fileDir,"_" + fileName + ".scss"))
      );
    }

• win7 64bit
• node.js 8.11.3
• node-sass 4.9.2
• vscode 1.25.1

[cyberpro4]

Just leaving here a simple solution found.

Since the problem is a "race condition" between the editor save operation and the watch itself, adding --use-polling option will break the concurrence. For ex:

node-sass-chokidar src/ -o src/ --watch --recursive --use-polling --polling-interval 1000

[Ness70]

@marcosbozzani, If I may ask, where and in which file do you add this code.

EDIT: No need to reply to this, i checked another forum where you responded with the exact fix, the file to change.. it worked for me. Thanks alot. 👍

[ehindola]

please anybody how do i use this change the retry mechanism for one with exponential backoff?

[MatteoGauthier]

Up ?

[ayofef]

where do i paste this line of code:
if (isFileUnreadable(error) && retries < 4) {
retries++;
setTimeout(() => sass.render(renderOptions, renderCallback), Math.pow(retries, 5));
}

[Agasthian]

@ayofef you can patch this code in your project's node-sass local
Location => 'node_modules/node-sass/lib/render.js'
Line no => 114 in render.js file.
This solution works for me.

[nschonni]

You could look at using something like https://www.npmjs.com/package/patch-package to apply patches like this. (Haven't tried, just searched for "npm patches")

[ayofef]

Thank you

[wfabio]

@marcosbozzani worked for me by replacing the file localy, many thanks! 👍

Hello Marcos, Can you, please, tell me how to replace this file? I have no idea how to do it.

[marcosbozzani]

@wfabio, locate the file node-sass/lib/render.js inside your local node_modules folder and replace with this code:

https://github.com/marcosbozzani/node-sass/blob/bug-vscode-watch/lib/render.js

You may need to redo this if you reinstall the library with npm or yarn

[saper]

Can somebody explain me what exactly vscode is doing? What is the sequence of operations we are seeing when saving the file?

[eastlin7]

I added this to node-sasss and it fixed my issue on my windows 10 machine.

[saper]

@maartenraes can you come up with some reasonable value lower than 1000 ?

[saper]

Could anyone experiencing this add the following patch to the libsass code (src/libsass/src/file.cpp) then rebuild node-sass and see what error message is generated? //cc @mgreter

index 32d4a7c63..728d128cd 100644
--- a/src/libsass/src/file.cpp
+++ b/src/libsass/src/file.cpp
@@ -417,7 +417,10 @@ namespace Sass {
         if (rv > 32767) throw Exception::OperationError("Path is too long");
         if (rv == 0) throw Exception::OperationError("Path could not be resolved");
         HANDLE hFile = CreateFileW(resolved, GENERIC_READ, FILE_SHARE_READ, NULL, OPEN_EXISTING, 0, NULL);
-        if (hFile == INVALID_HANDLE_VALUE) return 0;
+        if (hFile == INVALID_HANDLE_VALUE) {
+            std::cerr << "Error opening file:" << resolved << "LastError was [" << GetLastError() << "]" << std::endl;
+            return 0;
+        }
         DWORD dwFileLength = GetFileSize(hFile, NULL);
         if (dwFileLength == INVALID_FILE_SIZE) return 0;
         // allocate an extra byte for the null char

[umakanth-pendyala]

Is there any permanent fix to this problem, rather than a temporary one.

[umakanth-pendyala]

still having the problem after replacing the render.js file.

[marcosbozzani]

@umakanth-pendyala, hello.

Here are some things that you can try:

• verify that you update your project local copy of render.js inside the ${project_root}/node_modules/node-sass/lib/
• apply these changes (remove the red lines and add the green ones) marcosbozzani@266861b#diff-a485abf5b8f49de7f313d7799df3faf4 to node_modules/node-sass/lib/render.js
• if nothing else works, you may try another library like dart-sass (npm i sass or yarn add sass)

If you have further issues or questions, create issues here https://github.com/marcosbozzani/node-sass/issues since these changes aren't merged in here.

Hope it helps! 👍

[marcosbozzani]

A ready to use patch equivalent to this PR is available here: https://github.com/marcosbozzani/patch-node-sass-watch