"Error - [sass] Error: Missing binding" when using Visual Studio Extension for SPFx

When running Debug command in Visual Studio on an SPFx project, you may notice a lot of red in the console window:

Furthermore, the web page will open to a page on localhost:5432 instead of localhost:4321.

Cause

This error is caused by a version mismatch. The current guidance for setting up a developer workstation calls for version 6.x of NodeJS. The Node Tools for Visual Studio (version 1.3.50201.08) is using NodeJS version 5.4.1.

You can see this in the output windows. When the project is opened, the Node Tools will inspect the packages.json file and download any missing packages. This process will log to the Output windows. (Select "Bower/npm" from the dropdown.) Near the bottom, below the dependency tree, look for errors. The running version is displayed in the log:

Resolution

Configure Visual Studio to use the NodeJS version you installed instead of the version included in the Visual Studio install:

  • Click Tools > Options
  • Expand Projects and Solutions > Web Package Management.
  • Click on External Web Tools
  • Select the entry $(PATH).
  • Click the up arrow to make this entry first in the list.


Performing these steps will not fully solve the issue for existing projects. You may still need to run the npm rebuild node-sass --force command. However, new projects will correctly download the correct node-sass module.