markdown node-sass vs MS Windows.md

Posted 2021-05-06

# node-sass vs MS Windows
Для тех, кто, как и я, имеет несчастье работать по MS Windows.

[NativeSPAExample](https://github.com/lempiy/NativeSPAExample), похоже, нормально разворачивается под !Windows, 
а остальным (sic!) предстоят пляски с бубном.

В этом воркфлоу будем решать проблемы по мере их возникновения. В цитатах логов будут пропущены фрагменты с сообщениями
о нормальном течении процесса. Сообщения об ошибках и предупреждения будут пронумерованы для упрощения отсылки к ним.

Полезные ресурсы - в конце документа.

## Attempts

### Attempt #2

Windows 8.1 x64
На этом компе ранее разворачивалось число проектов достаточно большое для того, чтобы окружение оказалось насыщено
инструментами и приложениями под `node`.

> Attempt #1 осуществлялся на другом компе (Windows 10, x64) и успехом не завершился, несмотря на все усилия. 

1. Fork and clone [NativeSPAExample](https://github.com/lempiy/NativeSPAExample)
2. `npm install`:
```
#1 npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
#2 npm WARN prefer global node-gyp@3.6.2 should be installed with -g
...
#3 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
#4 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
#5 npm WARN stylelint-webpack-plugin@0.2.0 requires a peer of stylelint@^6.0.1 but none was installed.
#6 npm WARN reg-form@0.0.1 No repository field.
```
Ошибок нет, только предупреждения.
Проверим, окажется ли что-то критичным.

3. `npm start`
```
#1 ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
#2 webpack: Failed to compile.
```
Пока проигнорируем.

4. navigate to http://localhost:3000/
(Номер порта мы знаем из `package.json` проекта).

Похоже, приложение работает, как и ожидалось.

#### Выводы

Похоже, на текущей платформе окружение разработки оказалось достаточно подготовленным.

### Attempt #3

Windows 10 x64

1. Fork and clone [NativeSPAExample](https://github.com/lempiy/NativeSPAExample)
2. `npm install`:
```
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

> node-sass@3.13.1 install D:\prg\-external\NativeSPAExample\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
#1 Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":

HTTP error 404 Not Found
...

Building: D:\Program Files\nodejs\node.exe D:\prg\-external\NativeSPAExample\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
...
  Building solution configuration "Release|x64".
Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (1) is building "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) on node 1 (default targets).
Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) is building "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (3) on node 1 (default targets).
D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: The imported project "D:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (default targets) -- FAILED.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (default targets) -- FAILED.
Done Building Project "D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (default targets) -- FAILED.

#2 Build FAILED.

"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.sln" (default target) (1) ->
"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\binding.vcxproj.metaproj" (default target) (2) ->
"D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj" (default target) (3) ->
  D:\prg\-external\NativeSPAExample\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: The imported project "D:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.

    0 Warning(s)
    1 Error(s)

Time Elapsed 00:00:00.52
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\12.0\bin\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (D:\prg\-external\NativeSPAExample\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\prg\\-external\\NativeSPAExample\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\prg\-external\NativeSPAExample\node_modules\node-sass
gyp ERR! node -v v8.9.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN Error: EPERM: operation not permitted, scandir 'D:\prg\-external\NativeSPAExample\node_modules\scss-tokenizer\node_modules'
npm WARN  { Error: EPERM: operation not permitted, scandir 'D:\prg\-external\NativeSPAExample\node_modules\scss-tokenizer\node_modules'
npm WARN   stack: 'Error: EPERM: operation not permitted, scandir \'D:\\prg\\-external\\NativeSPAExample\\node_modules\\scss-tokenizer\\node_modules\'',
npm WARN   errno: -4048,
npm WARN   code: 'EPERM',
npm WARN   syscall: 'scandir',
npm WARN   path: 'D:\\prg\\-external\\NativeSPAExample\\node_modules\\scss-tokenizer\\node_modules' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@3.13.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.13.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Oleksiy\AppData\Roaming\npm-cache\_logs\2018-01-29T21_19_53_064Z-debug.log
```
Довольно много ошибок. Вижу две ключевых группы:
 * #1: не удалось загрузить https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
 * #2: не удалось сбилдить что-то важное

О #1 [здесь](https://github.com/sass/node-sass/issues/2073) говорят, что помогает `npm i gulp-sass@latest --save-dev`. Пробуем.

2. `npm i gulp-sass@latest --save-dev`
```
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> node-sass@4.7.2 install D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js

#3 Cached binary found at C:\Users\Oleksiy\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node

> node-sass@4.7.2 postinstall D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass
> node scripts/build.js

Binary found at D:\prg\-external\NativeSPAExample\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN sass-loader@3.2.3 requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN stylelint-webpack-plugin@0.2.0 requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN reg-form@0.0.1 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ gulp-sass@3.1.0
```
Плюс в `package.json` появились новые записи:
```
{
  ...
  "devDependencies": {
    ...
    "babel-polyfill": "^6.23.0",
    ...
    "extract-text-webpack-plugin": "^1.0.1",
    ...
    "gulp-sass": "^3.1.0",
    ...
    "webpack-dev-server": "^1.12.1"
  },
  ...
}
```
Версии `node-sass` в #1 и #3 заметно различаются. Попробуем найти компоненту для `3.13.1`

3. Navigate to https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node

Таки `404`. Далее видим, что [здесь](https://github.com/sass/node-sass/releases?after=v4.4.0) 
есть компоненты для версии `3.13.0`, а дальше сразу для `3.14.0-0'.

Пытаемся жить с тем, что есть, т.е. `4.7.2`

Меняем в `package.json` `"node-sass": "^3.3.3",` `"node-sass": "^4.7.2",`

4. `npm install`

Ура! Были только ворнинги. С этим можно жить.

Проверяем работоспособность аппа.

5. `npm start`
```
...
ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.
```
Ошибки те же, что и в Attempt #2.

6. Navigate to http://localhost:3000/

Приложение работает.

Попробуем решить проблему из шага #5:

7. PowerShell as admin > `npm install --global --production windows-build-tools`
```
...
Successfully installed Python 2.7
Successfully installed Visual Studio Build Tools.
+ windows-build-tools@1.3.2
...
```

Похоже, это была не лучшая идея, потому что теперь

8. `npm start`
```
> webpack-dev-server --config webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 0.0.0.0:3000
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at doListen (net.js:1501:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reg-form@0.0.1 start: `webpack-dev-server --config webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reg-form@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Oleksiy\AppData\Roaming\npm-cache\_logs\2018-01-29T22_06_32_838Z-debug.log
```

В `package.json` убираем `--host 0.0.0.0` в `scripts.start`

9. `npm start`
```
...
ERROR in [copy-webpack-plugin] unable to locate 'assets' at 'D:\prg\-external\NativeSPAExample\assets'
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 5.27 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/main.sass 3.77 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.
```

Опять ошибка и такая же, как в шаге #5
([a known issue](https://github.com/webpack-contrib/copy-webpack-plugin/issues/88)). И приложение работает, при том.

Рискнём:

10. `npm install`
```
npm WARN sass-loader@3.2.3 requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN stylelint-webpack-plugin@0.2.0 requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN reg-form@0.0.1 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
```

Теперь внимательнее отнесёмся к ворнингам:

11. `npm install npm install node-sass@^3.4.2 ; npm install stylelint@^6.0.1`

....

## Solutions:
https://github.com/npm/npm/issues/17671

1. Open "Windows Defender Security Centre" by searching in start menu.
2. Click on "Virus & threat protection" at left side pane.
3. Click on "Virus & threat protection settings"
4. Scroll down and Click on "Add or remove exclusions" under "Exclusions"
5. Click on "Add an exclusion" Button then "Process"
6. Enter process name: "node.exe" and click on "Add"
7. DONE! Now Feel free to install any npm packages.

`npm cache verify`

> I had this issue and it was to do with residual files for me. 
> I ran `npm cache clean --force` and also deleted `AppData\Roaming\npm-cache` folder.

**Or upgrade:**

> On Windows 10 at least it's worth noting that if you're using 9.x (which I am on one machine) you may run into an issue where npm installed in AppData doesn't want to play nice with node 9 and update. You have to uninstall:

`npm uninstall -g npm`

> Which will fall back to the one included in the nodejs install. Then you can install a new one:

`npm install -g npm@5.6.0`

**Or downgrade:**
`npm install -g npm@5.0.3` 




## Useful resources

 * [`MS Build tools`](https://github.com/nodejs/node-gyp#on-windows)
 * [](https://github.com/npm/npm/issues/17671)
 * [MSBUILD : error MSB4132: The tools version "2.0" is unrecognized](https://github.com/haraka/Haraka/issues/1721)
 * [`npm cache`](https://blogs.msdn.microsoft.com/matt-harrington/2012/02/23/how-to-fix-node-js-npm-permission-problems/)
 * [Installing 3.13.1 with Node 9](https://github.com/sass/node-sass/issues/2073)
 * [Install node-sass 4.5.0 failed on window 7](https://github.com/sass/node-sass/issues/1888)