启动并运行现有的 React 应用程序答案

【问题标题】：Getting an existing React App up and running启动并运行现有的 React 应用程序
【发布时间】：2022-01-07 23:06:51
【问题描述】：

我正在尝试让一个已经存在的 React 应用在我的 Mac 上本地运行。我有所有的源文件，并且在我的机器上安装了 node.js。

当我运行 npm install 时，我会看到一长串弃用和 npm 错误。一个列表太长了，远远超过了堆栈溢出字符限制。结束。

npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/util.cpp:3:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/values.cpp:3:
npm ERR! In file included from ../src/libsass/src/values.hpp:4:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/binding.cpp:1:
npm ERR! In file included from ../../nan/nan.h:58:
npm ERR! In file included from /Users/USER/.node-gyp/16.13.1/include/node/node.h:63:
npm ERR! In file included from /Users/USER/.node-gyp/16.13.1/include/node/v8.h:30:
npm ERR! /Users/USER/.node-gyp/16.13.1/include/node/v8-internal.h:492:38: error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?
npm ERR!             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!                                 ~~~~~^~~~~~~~~~~
npm ERR!                                      remove_cv
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:776:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR!                                                  ^
npm ERR! 1 error generated.
npm ERR! make: *** [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 (/Users/USER/Desktop/it-cc/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/USER/Desktop/it-cc/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/USER/Desktop/it-cc/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

我尝试了以下方法：

确保删除所有锁定文件和 node_module 目录
npm cache clear --force 清除缓存
npm audit fix

我对 React 有点陌生，非常感谢任何帮助！

package.json 内容：

{
  "name": "marketing-roi",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

它是 M1 mac 吗？这些错误是节点尝试在 C++ 中编译本机模块失败，如果您的架构不同，这将是有意义的。
可能是M1处理器的原因。
@JaredSmith 这是英特尔 i5
@DavidMartini 好吧，无论如何，它与 React 无关：由于某种原因 libsass 没有编译。你有安装 xcode 和 clang 吗？你能把 package.json 的内容贴出来看看我们能不能复制吗？
发现sass的最新版本是1.47.0。在 package.json 中更新，我们已经编译成功了！

标签： javascript node.js reactjs npm

【解决方案1】：

答案是在我的 package.json 文件中将 node-sass 替换为 sass，并将版本编辑为有效版本（在我的情况下，我选择了最新版本 1.47.0）。

我正在我的机器上运行当前版本的 node，并指定了一个旧版本的 node-sass，因为该应用是几年前构建的，所以我的 package.json 文件不再支持该版本。 Deprecation Announcement

感谢@Jared Smith

【讨论】：