OleksiyRudenko/node-sass vs MS Windows.md

## node-sass vs MS Windows.md

      
    Raw
  

              node-sass vs MS Windows.md
            
          
    node-sass vs MS Windows

Для тех, кто, как и я, имеет несчастье работать по MS Windows.
NativeSPAExample, похоже, нормально разворачивается под !Windows,
а остальным (sic!) предстоят пляски с бубном.
В этом воркфлоу будем решать проблемы по мере их возникновения. В цитатах логов будут пропущены фрагменты с сообщениями
о нормальном течении процесса. Сообщения об ошибках и предупреждения будут пронумерованы для упрощения отсылки к ним.
Полезные ресурсы - в конце документа.
Attempts

Attempt #2

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

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


Fork and clone NativeSPAExample
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.

Ошибок нет, только предупреждения.
Проверим, окажется ли что-то критичным.

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.

Пока проигнорируем.

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

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

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

Windows 10 x64

Fork and clone NativeSPAExample
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 здесь говорят, что помогает npm i gulp-sass@latest --save-dev. Пробуем.

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

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

Таки 404. Далее видим, что здесь
есть компоненты для версии 3.13.0, а дальше сразу для `3.14.0-0'.
Пытаемся жить с тем, что есть, т.е. 4.7.2
Меняем в package.json "node-sass": "^3.3.3", "node-sass": "^4.7.2",

npm install

Ура! Были только ворнинги. С этим можно жить.
Проверяем работоспособность аппа.

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.

Navigate to http://localhost:3000/

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

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
...

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

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

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). И приложение работает, при том.
Рискнём:

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"})

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

npm install npm install node-sass@^3.4.2 ; npm install stylelint@^6.0.1

....
Solutions:

npm/npm#17671

Open "Windows Defender Security Centre" by searching in start menu.
Click on "Virus & threat protection" at left side pane.
Click on "Virus & threat protection settings"
Scroll down and Click on "Add or remove exclusions" under "Exclusions"
Click on "Add an exclusion" Button then "Process"
Enter process name: "node.exe" and click on "Add"
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

MSBUILD : error MSB4132: The tools version "2.0" is unrecognized
npm cache
Installing 3.13.1 with Node 9
Install node-sass 4.5.0 failed on window 7