--watch error "Path must be a string. Received undefined"

[Karl Espiritu]

I'm running a simple node-sass-command:
node-sass-chokidar ./src/web/scss/main.scss -o public/css --watch

but keeps giving me this error:
path.js:28 throw new TypeError('Path must be a string. Received ' + inspect(path));

I'm running on

• node v8.9.4

[Karl Espiritu]

I am also just following these steps on using SASS with CRA (create-react-app)

Post-Processing CSS

[Eitan R]

I'm also having this exact issue.

[Eitan R]

I'm using node v8.10.0

[Karl Espiritu]

A temporary solution (but not ideal) is to use node-sass instead:

"build-css": "node-sass --include-path ./src --include-path ./node_modules ./src/web/scss/main.scss -o public/css",
"watch-css": "npm run build-css && node-sass --include-path ./src --include-path ./node_modules ./src/web/scss/main.scss -o public/css --watch --recursive",

[Murad Iusufov]

I locked the version to 1.0 in my project, it seems that the issue appeared in 1.1.x.

[Eitan R]

@flood4life - that worked for me as well, granted it says "Rendering Complete, saving .css file..." about 60 times before actually writing the css file. Is this happening for you too?

[William Bruntrager]

Going from v1.1.0 to v1.1.2, this code was changed:

But directory is undefined on the options object, which causes an error.

It appears this bug was introduced by this commit:

e055e53

Edited to add: The code in this commit uses options.output, which was later changed to options.directory, but neither property is defined on the options object.

Edit 2: Because it is caused by options.directory being undefined, this issue only appears when node-sass-chokidar is instructed to watch a single file rather than a whole directory.

[Michael Wayman]

oh I see. I never imagined people only watching a single file. I will try and fix later today

[William Bruntrager]

@michaelwayman Thanks. Might I also suggest that you take a look at the --skip-initial flag as a source of this problem? I wasn't really sure what motivated the change in the code but it seemed to be related to errors people were seeing when importing the Bulma framework. When I tried to fix the problem using this code:

  watcher.on('change', watcherHandler).on('add', function(file) {
    if (!options.directory) {
      watcherHandler(file);
    } else {
      if (file.indexOf(path.resolve(options.directory)) !== -1) {
        watcherHandler(file);
      }
    }
  });

I get those errors initially unless I use the --skip-initial flag. As you know, node-sass does not do an initial compile when --watch mode is active. So you might consider making the initial compile "opt-in" rather than "opt-out" for node-sass-chokidar.

[Michael Wayman]

try the latest version this should be patched 1.2.1 and let me know

[William Bruntrager]

CSS will compile with 1.2.1, but the console shows ugly errors on initial compile. I created a project demonstrating that here:

https://github.com/wbruntra/chokitest

Running npm watch-css on this package fills the console with errors, though in reality there is nothing wrong.

Update: The command npm run watch-dir (same respository) causes very bad effects. All of Bulma's .sass files are compiled to .css, which creates a problem of ambiguity on all subsequent compilation attempts. Again, adding the flag --skip-initial avoids the problem.

[William Bruntrager]

As I see it, the big problem is that node-sass-chokidar is rendering CSS files before chokidar has signalled that it finished adding all the files that it is initially going to watch. I'm thinking you could fix this by adding a 'ready' listener to the watcher, as in this code:

wbruntra@d533669

[William Bruntrager]

Bottom line (for me): when using --watch, one should also use --skip-initial, and create a separate npm script to perform the initial CSS build rather than relying on watch. Having node-sass-chokidar perform the initial compile in watch mode creates many unexpected problems as the program deals with chokidar 'add' events during chokidar's preparation to watch the initial set of files.

[Michael Wayman]

Thanks @wbruntra for the example project. I don't often import sass ( i typtically write my own) BUT with the package I Just published, v1.2.2 all the commands you wrote in package.json should be working now.

Sorry for all the inconvenience folks, writing tests for the --watch flag is really cumbersome as it is a process that doesn't really quit, on top of that I rushed many of the features and bug fixes when I should have given them the attention they deserved. ANYWAY, with this latest version we should see a package that is more stable. And without the issues people have been talking about.
Please let me know if you are still have issues.

[Karl Espiritu]

thanks @michaelwayman!

[Michael Wayman]

This issue seems to be resolved with 1.2.2