node-sass-chokidar: I am not able to run SASS into my create-react-app

Hi there I am following the thread started here. I did what you suggested to downgrade node-sass-chokidar to 0.0.2 but I got same results

About your question:

do you have some sort of mounted file system or running a VM or windows/linux hybrid? Are you running cygwin or have symlinks or anything like that?

I would say not, I mean I am not running a VM or windows/linux hybrid or cygwin. As you’ve asked, I am attaching the very basic react project done with create-react-app where I first run “npm run watch-css”. At first, scss file is generated correctly but when I make some change and save it, I get this error:

C:\React\sass>npm run watch-css

> sass@0.1.0 watch-css C:\React\sass
> npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive


> sass@0.1.0 build-css C:\React\sass
> node-sass-chokidar src/ -o src/

Rendering Complete, saving .css file...
Wrote CSS to C:\React\sass\src\App.css
Wrote 1 CSS files to C:\React\sass\src\
=> changed: C:\React\sass\src\App.scss
{
  "status": 3,
  "message": "File to read not found or unreadable: C:/React/sass/src/App.scss",
  "formatted": "Internal Error: File to read not found or unreadable: C:/React/sass/src/App.scss\n"
}

I’ll see if I can reproduce this issue in other computer with Windows 10. Looking forward to your comments. Best regards

react-with-sass.zip

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (1 by maintainers)

Most upvoted comments

Hi futur readers 😃

With the #57 PR available from node-sass-chokidar@1.3, I definitively fix my problem with VSCode by adding thoses parameters into package.json :

+27

xxDukeMCxx on May 23, 2018

I’ve created a PR that fix this problem: https://github.com/sass/node-sass/pull/2386

If want to try this fix, you can patch your node-sass local copy by replacing ‘node_modules/node-sass/lib/render.js’ with this version: https://github.com/marcosbozzani/node-sass/blob/bug-vscode-watch/lib/render.js

The diff is here: https://github.com/marcosbozzani/node-sass/commit/266861bf5761dcafd5d53d123264b965c861887c#diff-a485abf5b8f49de7f313d7799df3faf4

marcosbozzani on May 18, 2018

Hi,

Have the same problem with VSCODE. Read a lot of issues here and there about the fact that Chokidar detect the file change before VSCODE unlock it. Not a expert at all, but find that add the “–usePolling” param can help with VSCODE (error still raise, but a lot less). Exemple :

xxDukeMCxx on May 4, 2018

--usePolling --polling-interval 500 working for AWS Cloud9 running on Linux - TBH, I think this issue is editor agnostic and an underlying symptom of node-sass-chokidar. My package.json is (based on https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc):

{
  "name": "cv-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive --usePolling --polling-interval 500",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

This issue manifested itself by not compiling properly. Looking at the generated index.css file I can see an empty module exports.push([module.id, "", ""]); was generated when it failed. If I saved the same file a couple more times the module definition would become defined e.g. exports.push([module.id, ".Input .input-group ... ]);

pjm4 on Jun 10, 2018

@prameshbajra @sebhewelt @llKreator I had a similar issue, not with the error but with not noticing that files changed. My setup was a host windows machine and a guest linux machine run with virtual box and vagrant. The changes in the sass files were not recognized and node-sass-chokidar was not building, if i changed them on windows in my shared folder. Like llKreator mentioned I just used the standalone chokidar package (node install chokidar-cli) and configured it to run node-sass-chokidar (could be node-sass as well, cause you don’t need watch anymore) if it realized that changes were made:

"build-css": "node-sass-chokidar src/sass/main.scss -o src/css/ --source-map true",
"watch-css": "npm run build-css && chokidar 'src/sass/**/*.scss' -c 'npm run build-css' --polling"

Just call npm run watch-css

Maybe this helps

alabama on Jan 27, 2018

Oh yeah, the polling interval functionnality is present since 1.3.0, but you still have to activate it on your own.

xxDukeMCxx on Jul 6, 2018