尝试部署 web 应用程序时，前端使用 create-react-app 而不是 npm 在 VPS 上正确安装

Question

I'm having trouble installing the front-end of my web app I'm trying to deploy on a VPS. It's running Ubuntu 21.04, the back-end npm installs successfully but I'm unable to npm install the front-end correctly. Attached is the log.

Within the body of the post contains a shortened version of the log, I tried to include all the pertinent info but I'm not exactly sure what I'm looking at here. The full logs are linked on the gist below. Any help would be greatly appreciated!

https://gist.github.com/jermerc/d868fc518d1c5ff613247487a3b94d16

npm verb stack Error: command failed
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/bin/node',
npm ERR! gyp verb cli   '/root/ticketkings/frontend/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@16.3.0 | linux | 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` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -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: 16.3.0
npm ERR! gyp verb command install [ '16.3.0' ]
npm ERR! gyp verb install input version string "16.3.0"
npm ERR! gyp verb install installing version: 16.3.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: 16.3.0
npm ERR! gyp verb build dir attempting to create "build" dir: /root/ticketkings/frontend/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /root/ticketkings/frontend/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: /root/ticketkings/frontend/node_modules/node-sass/build/config.gypi
npm ERR! (node:1360) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /root/ticketkings/frontend/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /root/ticketkings/frontend/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/root/ticketkings/frontend/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   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/root/ticketkings/frontend/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/root/ticketkings/frontend/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/root/.node-gyp/16.3.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=/root/.node-gyp/16.3.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/root/ticketkings/frontend/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/root/.node-gyp/16.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/root/ticketkings/frontend/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   '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 /root/.node-gyp/16.3.0
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../src/libsass/src/cencode.c: In function ‘base64_encode_block’:
npm ERR! ../src/libsass/src/cencode.c:48:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR!    48 |    result = (fragment & 0x003) << 4;
npm ERR!       |    ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:52:2: note: here
npm ERR!    52 |  case step_B:
npm ERR!       |  ^~~~
npm ERR! ../src/libsass/src/cencode.c:62:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR!    62 |    result = (fragment & 0x00f) << 2;
npm ERR!       |    ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:66:2: note: here
npm ERR!    66 |  case step_C:
npm ERR!       |  ^~~~
npm ERR! ../src/libsass/src/functions.cpp: In function ‘void Sass::Functions::handle_utf8_error(const Sass::ParserState&, Sass::Backtraces)’:
npm ERR! ../src/libsass/src/functions.cpp:110:20: warning: catching polymorphic type ‘class utf8::invalid_code_point’ by value [-Wcatch-value=]
npm ERR!   110 |       catch (utf8::invalid_code_point) {
npm ERR!       |                    ^~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:114:20: warning: catching polymorphic type ‘class utf8::not_enough_room’ by value [-Wcatch-value=]
npm ERR!   114 |       catch (utf8::not_enough_room) {
npm ERR!       |                    ^~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:118:20: warning: catching polymorphic type ‘class utf8::invalid_utf8’ by value [-Wcatch-value=]
npm ERR!   118 |       catch (utf8::invalid_utf8) {
npm ERR!       |                    ^~~~~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function ‘char* json_encode_string(const char*)’:
npm ERR! ../src/libsass/src/json.cpp:405:15: warning: catching polymorphic type ‘class std::exception’ by value [-Wcatch-value=]
npm ERR!   405 |   catch (std::exception) {
npm ERR!       |               ^~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function ‘char* json_stringify(const JsonNode*, const char*)’:
npm ERR! ../src/libsass/src/json.cpp:424:15: warning: catching polymorphic type ‘class std::exception’ by value [-Wcatch-value=]
npm ERR!   424 |   catch (std::exception) {
npm ERR!       |               ^~~~~~~~~
npm ERR! In file included from /root/.node-gyp/16.3.0/include/node/v8.h:30,
npm ERR!                  from /root/.node-gyp/16.3.0/include/node/node.h:63,
npm ERR!                  from ../../nan/nan.h:56,
npm ERR!                  from ../src/binding.cpp:1:
npm ERR! /root/.node-gyp/16.3.0/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
npm ERR! /root/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   452 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /root/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   452 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /root/.node-gyp/16.3.0/include/node/v8-internal.h:452:50: error: template argument 2 is invalid
npm ERR!   452 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                  ^
npm ERR! /root/.node-gyp/16.3.0/include/node/v8-internal.h:452:63: error: ‘::Perform’ has not been declared
npm ERR!   452 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                               ^~~~~~~
npm ERR! In file included from ../src/binding.cpp:1:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2294:7: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2294 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |       ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)’:
npm ERR! ../src/binding.cpp:284:80: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!   284 |     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR!       |                                                                                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)’:
npm ERR! ../src/binding.cpp:320:80: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!   320 |     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR!       |                                                                                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! In file included from ../../nan/nan.h:56,
npm ERR!                  from ../src/binding.cpp:1:
npm ERR! ../src/binding.cpp: At global scope:
npm ERR! /root/.node-gyp/16.3.0/include/node/node.h:806:7: warning: cast between incompatible function types from ‘void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)’ {aka ‘void (*)(v8::Local<v8::Object>)’} to ‘node::addon_register_func’ {aka ‘void (*)(v8::Local<v8::Object>, v8::Local<v8::Value>, void*)’} [-Wcast-function-type]
npm ERR!   806 |       (node::addon_register_func) (regfunc),                          \
npm ERR!       |       ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! /root/.node-gyp/16.3.0/include/node/node.h:840:3: note: in expansion of macro ‘NODE_MODULE_X’
npm ERR!   840 |   NODE_MODULE_X(modname, regfunc, NULL, 0)  // NOLINT (readability/null_usage)
npm ERR!       |   ^~~~~~~~~~~~~
npm ERR! ../src/binding.cpp:358:1: note: in expansion of macro ‘NODE_MODULE’
npm ERR!   358 | NODE_MODULE(binding, RegisterModule);
npm ERR!       | ^~~~~~~~~~~
npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/root/ticketkings/frontend/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.11.0-18-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/root/ticketkings/frontend/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /root/ticketkings/frontend/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.3.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 verb exit 1
npm timing npm Completed in 540608ms
npm verb code 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-06-09T14_51_55_048Z-debug.log```

Answer 1

I had the same problem with node 16. I had to use node 12 in order to build correctly. Either change your version with nvm or if you use docker choose this image: node:12.20.2.