Skip to content

Instantly share code, notes, and snippets.

@OleksiyRudenko
Last active January 30, 2018 09:52
Show Gist options
  • Save OleksiyRudenko/f9d13fb898a71bafe435e701ad5a80b7 to your computer and use it in GitHub Desktop.
Save OleksiyRudenko/f9d13fb898a71bafe435e701ad5a80b7 to your computer and use it in GitHub Desktop.

node-sass vs MS Windows

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

NativeSPAExample, похоже, нормально разворачивается под !Windows, а остальным (sic!) предстоят пляски с бубном.

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

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

Attempts

Attempt #2

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

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

  1. Fork and clone NativeSPAExample
  2. npm install:
#1 npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
#2 npm WARN prefer global [email protected] 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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
#5 npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none was installed.
#6 npm WARN [email protected] No repository field.

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

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

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

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

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

Выводы

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

Attempt #3

Windows 10 x64

  1. Fork and clone NativeSPAExample
  2. npm install:
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

> [email protected] 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! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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 здесь говорят, что помогает npm i gulp-sass@latest --save-dev. Пробуем.

  1. npm i gulp-sass@latest --save-dev
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> [email protected] 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

> [email protected] 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 [email protected] requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]

Плюс в 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

  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",

  1. npm install

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

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

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

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

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

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

  1. PowerShell as admin > npm install --global --production windows-build-tools
...
Successfully installed Python 2.7
Successfully installed Visual Studio Build Tools.
+ [email protected]
...

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

  1. 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! [email protected] 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 [email protected] 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

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

Рискнём:

  1. npm install
npm WARN [email protected] requires a peer of node-sass@^3.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylelint@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

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

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

....

Solutions:

npm/npm#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 [email protected]

Or downgrade: npm install -g [email protected]

Useful resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment