NPM installation for fresh PhoenixLiveView project failing in Windows 10

Phoenix Forum Questions / Help
, ,
1

Background

I am trying to install the dependencies of a fresh project with Node.js v15.6.0. Because there is a bug with the version of webpack I am running the command npm i --legacy-peer-deps:

package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "nprogress": "^0.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.13.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

Problem

The problem is that even with that fix, my installation is failing:

PS C:\Users\user\Documents\GitHub\test_app\assets> npm i --legacy-peer-deps
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
npm ERR! Build started 1/29/2021 3:59:53 PM.
npm ERR! Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.sln" on node 1 (default targets).
npm ERR! ValidateSolutionConfiguration:
npm ERR!   Building solution configuration "Release|x64".
npm ERR! Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.sln" (1) is building "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) on node 1 (default targets).
npm ERR! Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) is building "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj" (3) on node 1 (default targets).
npm ERR! PrepareForBuild:
npm ERR!   Creating directory "Release\obj\libsass\".
npm ERR!   Creating directory "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\Release\".
npm ERR! InitializeBuildStatus:
npm ERR!   Creating "Release\obj\libsass\libsass.unsuccessfulbuild" because "AlwaysCreate" was specified.
npm ERR! ClCompile:
npm ERR!   C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin\x86_amd64\CL.exe /c /I"C:\Users\user\.node-gyp\15.6.0\include\node" /I"C:\Users\user\.node-gyp\15.6.0\src" /I"C:\Users\user\.node-gyp\15.6.0\deps\openssl\config" /I"C:\Users\user\.node-gyp\15.6.0\deps\openssl\openssl\include" /I"C:\Users\user\.node-gyp\15.6.0\deps\uv\include" /I"C:\Users\user\.node-gyp\15.6.0\deps\zlib" /I"C:\Users\user\.node-gyp\15.6.0\deps\v8\include" /I..\..\src\libsass\include /Z7 /nologo /W3 /WX- /MP /Ox /Ob2 /Oi /Ot /Oy /D NODE_GYP_MODULE_NAME=libsass /D USING_UV_SHARED=1 /D USING_V8_SHARED=1 /D V8_DEPRECATION_WARNINGS=1 /D V8_DEPRECATION_WARNINGS /D V8_IMMINENT_DEPRECATION_WARNINGS /D WIN32 /D _CRT_SECURE_NO_DEPRECATE /D _CRT_NONSTDC_NO_DEPRECATE /D _HAS_EXCEPTIONS=0 /D OPENSSL_NO_PINSHARED /D OPENSSL_THREADS /D "LIBSASS_VERSION=\"3.5.5\"" /GF /Gm- /MT /GS /Gy /fp:precise /Zc:wchar_t /Zc:forScope /GR- /Fo"Release\obj\libsass\\" /Fd"Release\obj\libsass\vc110.pdb" /Gd /TP /wd4351 /wd4355 /wd4800 /wd4251 /wd4275 /wd4244 /wd4267 /errorReport:queue /GR /EHsc ..\..\src\libsass\src\ast.cpp ..\..\src\libsass\src\ast_fwd_decl.cpp ..\..\src\libsass\src\backtrace.cpp ..\..\src\libsass\src\base64vlq.cpp ..\..\src\libsass\src\bind.cpp ..\..\src\libsass\src\check_nesting.cpp ..\..\src\libsass\src\color_maps.cpp ..\..\src\libsass\src\constants.cpp ..\..\src\libsass\src\context.cpp ..\..\src\libsass\src\cssize.cpp ..\..\src\libsass\src\emitter.cpp ..\..\src\libsass\src\environment.cpp ..\..\src\libsass\src\error_handling.cpp ..\..\src\libsass\src\eval.cpp ..\..\src\libsass\src\expand.cpp ..\..\src\libsass\src\extend.cpp ..\..\src\libsass\src\file.cpp ..\..\src\libsass\src\functions.cpp ..\..\src\libsass\src\inspect.cpp ..\..\src\libsass\src\json.cpp ..\..\src\libsass\src\lexer.cpp ..\..\src\libsass\src\listize.cpp ..\..\src\libsass\src\memory\SharedPtr.cpp ..\..\src\libsass\src\node.cpp ..\..\src\libsass\src\operators.cpp ..\..\src\libsass\src\output.cpp ..\..\src\libsass\src\parser.cpp ..\..\src\libsass\src\plugins.cpp ..\..\src\libsass\src\position.cpp ..\..\src\libsass\src\prelexer.cpp ..\..\src\libsass\src\remove_placeholders.cpp ..\..\src\libsass\src\sass.cpp ..\..\src\libsass\src\sass2scss.cpp ..\..\src\libsass\src\sass_context.cpp ..\..\src\libsass\src\sass_functions.cpp ..\..\src\libsass\src\sass_util.cpp ..\..\src\libsass\src\sass_values.cpp ..\..\src\libsass\src\source_map.cpp ..\..\src\libsass\src\subset_map.cpp ..\..\src\libsass\src\to_c.cpp ..\..\src\libsass\src\to_value.cpp ..\..\src\libsass\src\units.cpp ..\..\src\libsass\src\utf8_string.cpp ..\..\src\libsass\src\util.cpp ..\..\src\libsass\src\values.cpp
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR!   ast.cpp
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR!   ast_fwd_decl.cpp
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR!   backtrace.cpp
npm ERR!   base64vlq.cpp
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! cl : Command line warning D9025: overriding '/GR-' with '/GR' [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR!   bind.cpp
npm ERR!   check_nesting.cpp
npm ERR!   color_maps.cpp
npm ERR!   constants.cpp
npm ERR!   context.cpp
npm ERR!   cssize.cpp
npm ERR!   emitter.cpp
npm ERR!   environment.cpp
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include

(...)

npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\source_map.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\to_c.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\sass_context.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\sass_values.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\to_value.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\subset_map.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\units.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\utf8_string.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\values.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/base.h(20): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\util.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\src\libsass\include\sass/context.h(5): fatal error C1083: Cannot open include file: 'stdbool.h': No such file or directory (..\..\src\libsass\src\backtrace.cpp) [C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj]
npm ERR! Done Building Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\src\libsass.vcxproj" (default targets) -- FAILED.
npm ERR! Done Building Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.vcxproj.metaproj" (default targets) -- FAILED.
npm ERR! Done Building Project "C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\binding.sln" (default targets) -- FAILED.
npm ERR!
npm ERR! Build FAILED.
npm ERR!

npm ERR!     15 Warning(s)
npm ERR!     44 Error(s)
npm ERR!
npm ERR! Time Elapsed 00:00:01.50
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@15.6.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:194:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\test_app\assets\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:194:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Python27\python.EXE
npm ERR! gyp verb check python version `C:\Python27\python.EXE -c "import sys; print "2.7.18
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 15.6.0
npm ERR! gyp verb command install [ '15.6.0' ]
npm ERR! gyp verb install input version string "15.6.0"
npm ERR! gyp verb install installing version: 15.6.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 15.6.0
npm ERR! gyp verb build dir attempting to create "build" dir: C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\build\config.gypi
npm ERR! gyp verb config.gypi checking for gypi file: C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass\common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "msvs"
npm ERR! gyp info spawn C:\Python27\python.EXE
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   'C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-gyp\\gyp\\gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'msvs',
npm ERR! gyp info spawn args   '-G',
npm ERR! gyp info spawn args   'msvs_version=2012',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-sass\\build\\config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-gyp\\addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   'C:\\Users\\user\\.node-gyp\\15.6.0\\include\\node\\common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=C:\\Users\\user\\.node-gyp\\15.6.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=C:\\Users\\user\\.node-gyp\\15.6.0\\<(target_arch)\\node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-sass',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-sass\\build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir C:\Users\user\.node-gyp\15.6.0
npm ERR! gyp verb found first Solution file build/binding.sln
npm ERR! gyp verb could not find "msbuild.exe" in PATH - finding location in registry
npm ERR! gyp info spawn C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   'build/binding.sln',
npm ERR! gyp info spawn args   '/nologo',
npm ERR! gyp info spawn args   '/p:Configuration=Release;Platform=x64'
npm ERR! gyp info spawn args ]
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onExit (C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-gyp\lib\build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:379:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:285:12)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\Documents\\GitHub\\test_app\\assets\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\user\Documents\GitHub\test_app\assets\node_modules\node-sass
npm ERR! gyp ERR! node -v v15.6.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2021-01-29T14_59_56_065Z-debug.log
PS C:\Users\user\Documents\GitHub\test_app\assets>

I am using PowerShell in Windows and using chocolatey to install my packacges.

Question

Why am I having this error?

2

It’s caused by node-sass.
Fix: https://github.com/phoenixframework/phoenix/commit/621d16a51f3153748b02a5f263f369944ca948af

Everyone using Node.js with current Phoenix generated projects is experiencing this issue.

3 Likes
3

Don’t quote me on this but from the errors it may be possible that you need to install Visual Studio Build Tools. The log mentions something about ‘msbuild.exe’.

4

If so, it is the second bug I encounter with Phoenix. Not a very good first impression if I might say.
I changed the dependency but I still get the same error.

I believe I have them installed.

Capture
Capture1291×725 59.2 KB

5

I am using node 15.6.0 and I’ve updated my npm files to reflect so.

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@mdi/font": "^5.8.55",
    "bulma": "^0.9.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.17.1",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  }
}

And my webpack.config.js is


const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin()
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({
        patterns: [
          { from: "static", to: "../" },
        ],
      }),
    ]
  }
};

Just take into account that I am using another web framework (Bulma) so I’ve substituted it where it makes sense, and that this is working on a Mac.

Let me know if it works.

1 Like
6

I totally agree. Probably you’ll need to updade the fixed webpack v4 version also


I hope there is soon available a new fixed Phoenix version.
Or at least a clear statement that it’s only working with Node.js ≀ v14.

My contribution to have a way foreward:

3 Likes
7

I can see that it might be frustrating, but there’s nothing the phoenix team can do to fix the issues the node ecosystem has. Especially node-sass is notorious for breaking for a whole manner of reasons, which is why it’s eventually been deprecated.

1 Like
8

There is something the phoenix team can do; vote with the feet. It is not like there are little choice out there:

  • dart sass
  • plain css
  • postcss

While we are at this, I think we should ditch webpack too. snowpack is both conceptually simpler and easier to config.

9

Phoenix did ship for a long time with just css. A few weeks back a PR was accepted to change to dart sass in response to the official deprecation of node sass. It’s not like there is no reaction. But given the phoenix long releases cycles and much of it being encoded in the installer, which I guess many people do not regularly update (depending if changes land in maintenance branches) those decisions and results are generally experienced by users with a bunch of delay.

2 Likes
10

I am of the opinion that phoenix should stick with plain css in the application generators. It is not phoenix’s job to promote technologies in the node.js land, so it should require as little as possible npm packages. More advanced users can pick sass or postcss or whatnot; by that time they should already know what they are doing.

1 Like
11

I also never really understood why Phoenix takes the burdon to ship Sass to every developer.
It was once argued to have the ability to import other CSS files - a very little benefit in my oppinion.

So I personally are totally on the same page as you!
By the way, Snowpack really seems promising.

12

I like snowpack because it is very newbie friendly. My config file is:

module.exports = {
    mount: {
        "static": {url: "/", static: true, resolve: false},
        "css": "/css",
        "js": "/js"
    },
    plugins: [
        "@snowpack/plugin-postcss"
    ],
    buildOptions: {
        out: "../priv/static"
    },
};

Every line makes sense. On the other hand the webpack.config.js as shipped by phoenix intimidated me. Of cause it is not phoenix’s fault. webpack is a mess.

1 Like
13

This was the solution for me. By downgrading to Node LTS 14.X, all the problems I had were finally fixed.
As a new user to Phoenix, I really did wish this was made more clear form the start.

As for the discussion regarding Phoenix, it is not my intention to bash on it. Phoenix may be great for a lot of people, for me as a new user however, it has simply proven rather difficult to adopt thanks to these kinds of problems.

One should also have in mind that I am not the regular user of Phoenix. I am not exactly new to Elixir and I have been in the community for quite some time now. Most people I know, don’t bother creating an account here to start with.

I am simply worried Phoenix is losing potential users thanks to an issue that indeed, it’s not really their fault to begin with and that the only solution is a heavy migration to a new sass system.

With this said, I want to thank everyone for their help. Discussions here always bring something new!

2 Likes
14

On BigSur MacBook Air here. Installing all via brew.

Failing here:

npm install && node node_modules/webpack/bin/webpack.js --mode development and following:

for obvious reasons. Had to do:

brew install node@14 to get all to work and before that:

rm -rf node_modules/
npm cache clean -f

Thanks.

15

Is it working now?

16

So it is working if you install node version 14.
To be fair, boarding experience is quite tough with this issue.

1 Like