<p data-line="0" class="code-line">React で node-sass を使おうと思い、<strong>npm install node-sass したらエラーが出ました</strong></p>
<p data-line="2" class="code-line">どうやら、<strong>Windows で Node 環境使用している際によくあるエラーらしい...</strong></p>
<p data-line="4" class="code-line">とはいえ、インストールできないと積むので、解決していきます</p>
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" aria-hidden="true"></a> エラー内容</h2>
<p data-line="8" class="code-line">まずは、エラーの内容を確認してみます</p>
<div class="code-block-container"><pre><code class="code-line" data-line="10">npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - executable path is "C:\Users\****\anaconda3\python.exe"
npm ERR! gyp verb find Python - executing "C:\Users\****\anaconda3\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.9.12"
npm ERR! gyp info find Python using Python version 3.9.12 found at "C:\Users\****\anaconda3\python.exe"
(略)
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack     at C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\find-visualstudio.js:384:16
npm ERR! gyp ERR! stack     at C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at C:\Users\****\Desktop\my-app-react\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:420:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19045
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\****\\my-app-react\\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\****\Desktop\my-app-react\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.12.1
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
</code></pre></div><p data-line="66" class="code-line"><strong>Visual Studio が見つからないことが原因みたいです</strong></p>
<p data-line="68" class="code-line">NodeJs は一部 C ＋＋を使用しているらしく、そのためのコンパイラが必要になるよう。</p>
<p data-line="70" class="code-line">また、色々調べると<strong>Python3 系もダメみたいで、2 系をインストールする必要がある</strong>とのこと。</p>
<h2 id="%E5%BF%9C%E6%80%A5%E5%87%A6%E7%BD%AE%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%E5%BF%9C%E6%80%A5%E5%87%A6%E7%BD%AE%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 応急処置をしてみる</h2>
<p data-line="74" class="code-line">PowerShell を管理者権限で実行し、下記のコマンドを実行すると解決する場合が多いらしい</p>
<div class="code-block-container"><pre><code class="code-line" data-line="76"> npm install --global --production windows-build-tools
</code></pre></div><p data-line="80" class="code-line"><strong>Python や C++のインストールやパスを通すことを勝手にしてくれる</strong>→ エラーに出ていた足りないものを補ってくれるとのこと</p>
<p data-line="82" class="code-line">ひとまず、やってみた</p>
<div class="code-block-container"><pre><code class="code-line" data-line="84">PS C:\Users\*****\Desktop\my-app-react&gt; npm install --global --production windows-build-tools
npm WARN config production Use `--omit=dev` instead.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated windows-build-tools@5.2.2: Node.js now includes build tools for Windows. You probably no longer need this tool. See https://github.com/felixrieseberg/windows-build-tools for details.
npm ERR! code 1
npm ERR! path C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node ./dist/index.js
Downloading python-2.7.15.amd64.msi
npm ERR! [============================================&gt;] 100.0% of 20.2 MB (13.5 MB/s)
npm ERR! Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\*****\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
npm ERR! [============================================&gt;] 100.0% of 1.12 MB (1.12 MB/s)
npm ERR! Downloaded vs_BuildTools.exe. Saved to C:\Users\*****\.windows-build-tools\vs_BuildTools.exe.
npm ERR!
npm ERR! Starting installation...
npm ERR! Downloading installers failed. Error: TypeError: 'process.env' only accepts a configurable, writable, and enumerable data descriptor
npm ERR!     at Function.defineProperty (&lt;anonymous&gt;)
npm ERR!     at Object.removePath (C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools\dist\utils\remove-path.js:11:12)
npm ERR!     at Object.install (C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools\dist\install\index.js:29:19)
npm ERR!     at C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools\dist\start.js:17:19
npm ERR!     at Object.download (C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools\dist\download.js:35:5)
npm ERR!     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm ERR!     at async Object.aquireInstallers (C:\Users\*****\AppData\Roaming\npm\node_modules\windows-build-tools\dist\aquire-installers.js:32:13) {
npm ERR!   code: 'ERR_INVALID_OBJECT_DEFINE_PROPERTY'
npm ERR! }
npm ERR! windows-build-tools will now exit.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\*****\AppData\Local\npm-cache\_logs\2022-12-18T09_57_44_392Z-debug-0.log
</code></pre></div><p data-line="119" class="code-line">別のエラーが出ました。。。</p>
<p data-line="121" class="code-line">沼りそうなので、<strong>Python と Visual Studio をインストールして、パスを通すことにします</strong></p>
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%84%E3%82%89%E3%80%81%E3%83%91%E3%82%B9%E3%82%92%E9%80%9A%E3%81%99%E3%82%84%E3%82%89" data-line="123" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%84%E3%82%89%E3%80%81%E3%83%91%E3%82%B9%E3%82%92%E9%80%9A%E3%81%99%E3%82%84%E3%82%89" aria-hidden="true"></a> インストールやら、パスを通すやら</h2>
<h3 id="visual-studio-build-tools-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="125" class="code-line">
<a class="header-anchor-link" href="#visual-studio-build-tools-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Visual Studio Build Tools のインストール</h3>
<p data-line="127" class="code-line">下記 URL からダウンロードしたものを実行（ダブルクリック）します</p>
<p data-line="129" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e488adc5a5571" src="https://embed.zenn.studio/card#zenn-embedded__e488adc5a5571" data-content="https%3A%2F%2Fvisualstudio.microsoft.com%2Fthank-you-downloading-visual-studio%2F%3Fsku%3DBuildTools" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools</a></p>
<p data-line="131" class="code-line">少し待つとインストーラが起動するので、<strong>C ＋＋のビルドツールをインストール</strong>します</p>
<p data-line="133" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Kl0hHcdy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fb7b8cddb9cb7356716c6b92.png%3Fsha%3D7012a69e90699f6da4f4ee86ffcbc909bd719128" loading="lazy" class="md-img"></p>
<p data-line="135" class="code-line">インストール済みになれば OK！ ※今回は「<strong>Visual Studio Build Tools 2022</strong>」を入れました</p>
<p data-line="137" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--XvX6_cM9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8b467d9f1a0998f5f2869bf0.png%3Fsha%3D0a6ac8f252eebb8c798716fc4bd72d7129965f69" loading="lazy" class="md-img"></p>
<h3 id="python2.7-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="139" class="code-line">
<a class="header-anchor-link" href="#python2.7-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Python2.7 をインストール</h3>
<p data-line="141" class="code-line">下記の URL から、「Windows x86-64 MSI installer」をおとします</p>
<p data-line="143" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__76f4038e6b3d4" src="https://embed.zenn.studio/card#zenn-embedded__76f4038e6b3d4" data-content="https%3A%2F%2Fwww.python.org%2Fdownloads%2Frelease%2Fpython-2715%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.python.org/downloads/release/python-2715/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.python.org/downloads/release/python-2715/</a></p>
<p data-line="145" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--CGSNCoVV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8109069c140e65e18ce25dda.png%3Fsha%3D158ca0c1baa1efec74d355d230288788e79620c0" loading="lazy" class="md-img"></p>
<p data-line="147" class="code-line">おとしたファイルを実行します</p>
<p data-line="149" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Q-4Nk0YL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/70679a036d62eb408537ab7a.png%3Fsha%3Da3055325594778e98059ac589982c6bb7fcc0998" loading="lazy" class="md-img"></p>
<p data-line="151" class="code-line">どんどん「Next」おして、インストールしていきます</p>
<h3 id="npm-%E3%81%AB%E3%83%91%E3%82%B9%E3%82%92%E9%80%9A%E3%81%99" data-line="153" class="code-line">
<a class="header-anchor-link" href="#npm-%E3%81%AB%E3%83%91%E3%82%B9%E3%82%92%E9%80%9A%E3%81%99" aria-hidden="true"></a> npm にパスを通す</h3>
<p data-line="155" class="code-line">インストールが終わったので、それらのパスを npm に通します</p>
<div class="code-block-container"><pre><code class="code-line" data-line="157">// python2.7のパスを通す
PS C:\Users\****&gt; npm config set python python2.7
PS C:\Users\****&gt; npm config get python python2.7
python=python2.7
python2.7=undefined

// Visual Studio Build Tools のパスを通す
// インストールしたバージョンを指定（今回は2022）
PS C:\Users\****&gt; npm config set msvs_version 2022
PS C:\Users\****&gt; npm config get msvs_version
2022
</code></pre></div><h2 id="%E5%86%8D%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" data-line="171" class="code-line">
<a class="header-anchor-link" href="#%E5%86%8D%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 再実行してみる</h2>
<p data-line="173" class="code-line">これで準備が整ったので、<strong>もう一回 node-sass をインストールしてみます</strong></p>
<div class="code-block-container"><pre><code class="code-line" data-line="175">C:\Users\***&gt; npm install node-sass
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 210 packages, and audited 211 packages in 2s

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
</code></pre></div><p data-line="188" class="code-line">いけました！</p>
<h2 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" data-line="190" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h2>
<p data-line="192" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__88b6083595deb" src="https://embed.zenn.studio/card#zenn-embedded__88b6083595deb" data-content="https%3A%2F%2Fqiita.com%2Fchenglin%2Fitems%2Fb3ca0bc1dca0ed682b05" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/chenglin/items/b3ca0bc1dca0ed682b05" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/chenglin/items/b3ca0bc1dca0ed682b05</a></p>
<p data-line="194" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c3f72a7b6abd8" src="https://embed.zenn.studio/card#zenn-embedded__c3f72a7b6abd8" data-content="https%3A%2F%2Fwww.suzu6.net%2Fposts%2F334-yarn-error-node-gyp%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.suzu6.net/posts/334-yarn-error-node-gyp/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.suzu6.net/posts/334-yarn-error-node-gyp/</a></p>
<p data-line="196" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1c94a4afab46e" src="https://embed.zenn.studio/card#zenn-embedded__1c94a4afab46e" data-content="https%3A%2F%2Fqiita.com%2FpokoTan2525%2Fitems%2F144866019dd2646568cf" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/pokoTan2525/items/144866019dd2646568cf" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/pokoTan2525/items/144866019dd2646568cf</a></p>


【Windows】【Nodejs】npm installできない？？

Visual Studio Build Tools のインストール

インストールやら、パスを通すやら

Discussion