reactを触っている時、CSS Modulesを使おうと思い、node-sassをnpm installしたら、エラーが出た。エラーを解消するまでのはなし。
確認環境
- react 18.2.0
- node18.14.2
- docker desktop 4.16.2
- macOS 13.2
経緯
じゃけぇ氏が執筆した、「モダンJavaScriptの基本から始める React実践の教科書」を読みながら、サンプルを試していたのだが、cssモジュールを使おうとした際、以下のようなエラーが発生した。
書籍には、「yarn add node-sass」を実行して、node-sassをインストールすると書いてあるのだが、
私の環境では、以下のようなエラーが出てしまった。
# yarn add node-sass
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning node-sass > make-fetch-happen > cacache > @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
warning node-sass > node-gyp > make-fetch-happen > cacache > @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning " > styled-components@5.3.8" has unmet peer dependency "react-is@>= 16.8.0".
warning " > sass-loader@13.2.0" has unmet peer dependency "webpack@^5.0.0".
[4/4] Building fresh packages...
[-/3] ⠠ waiting...
[-/3] ⠠ waiting...
error /src/app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /src/app/node_modules/node-sass
Output:
Binary found at /src/app/node_modules/node-sass/vendor/linux-arm64-108/binding.node
Testing binary
Binary has a problem: Error: Error loading shared library /src/app/node_modules/node-sass/vendor/linux-arm64-108/binding.node: Exec format error
at Module._extensions..node (node:internal/modules/cjs/loader:1338:18)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at module.exports (/src/app/node_modules/node-sass/lib/binding.js:19:10)
at Object.<anonymous> (/src/app/node_modules/node-sass/lib/index.js:13:35)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32) {
code: 'ERR_DLOPEN_FAILED'
}
Building the binary locally
Building: /usr/local/bin/node /src/app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli '/usr/local/bin/node',
gyp verb cli '/src/app/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@8.4.1
gyp info using node@18.14.2 | linux | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb find Python Python is not set from command line or npm configuration
gyp verb find Python Python is not set from environment variable PYTHON
gyp verb find Python checking if "python3" can be used
gyp verb find Python - executing "python3" to get executable path
gyp verb find Python - "python3" is not in PATH or produced an error
gyp verb find Python checking if "python" can be used
gyp verb find Python - executing "python" to get executable path
gyp verb find Python - "python" is not in PATH or produced an error
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
gyp ERR! find Python checking if "python3" can be used
gyp ERR! find Python - "python3" is not in PATH or produced an error
gyp ERR! find Python checking if "python" can be used
gyp ERR! find Python - "python" is not in PATH or produced an error
gyp ERR! find Python
gyp ERR! find Python **********************************************************
gyp ERR! find Python You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
gyp ERR! find Python you can try one of the following options:
gyp ERR! find Python - Use the switch --python="/path/to/pythonexecutable"
gyp ERR! find Python (accepted by both node-gyp and npm)
gyp ERR! find Python - Set the environment variable PYTHON
gyp ERR! find Python - Set the npm configuration variable python:
gyp ERR! find Python npm config set python "/path/to/pythonexecutable"
gyp ERR! find Python For more information consult the documentation at:
gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
gyp ERR! find Python **********************************************************
gyp ERR! find Python
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Python installation to use
gyp ERR! stack at PythonFinder.fail (/src/app/node_modules/node-gyp/lib/find-python.js:330:47)
gyp ERR! stack at PythonFinder.runChecks (/src/app/node_modules/node-gyp/lib/find-python.js:159:21)
gyp ERR! stack at PythonFinder.<anonymous> (/src/app/node_modules/node-gyp/lib/find-python.js:202:16)
gyp ERR! stack at PythonFinder.execFileCallback (/src/app/node_modules/node-gyp/lib/find-python.js:294:16)
gyp ERR! stack at exithandler (node:child_process:427:5)
gyp ERR! stack at ChildProcess.errorhandler (node:child_process:439:5)
gyp ERR! stack at ChildProcess.emit (node:events:513:28)
gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:289:12)
gyp ERR! stack at onErrorNT (node:internal/child_process:476:16)
gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
gyp ERR! System Linux 5.15.49-linuxkit
gyp ERR! command "/usr/local/bin/node" "/src/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /src/app/node_modules/node-sass
gyp ERR! node -v v18.14.2
gyp ERR! node-gyp -v v8.4.1
gyp ERR! not ok
エラーメッセージを見ていると、Pythonをインストールしないといけないと書いてある。
You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,「node:18.14.2-alpine」のdockerイメージを使っているのだが、このイメージにはpythonがインストールされていなかった。
pythonを入れるべきかどうか考え、同じような事象の人がいないか、ググってみたが、見当たらない。
書籍では、Code Sandboxを使うか、ローカルPCでセットアップするか程度の説明だけだった。
reactのバージョンも「17.0.2」で作られたサンプルで、私は「18.2.0」という違いがある。
やったこと
python自体をインストールするのは、バージョンを3系の最新で良いのか？、本当に入れるべきなのか？という疑問があり、
nodeのバージョンを最新化してみようと思い、「node:latest」のdockerイメージに変更してみた。
今回は、これで解消したのだが、バージョン違いによって、うまく動かないケースは原因調査に時間がかかるなあと感じる。
本書では、サンプルをGithubに公開してくれていたり、Code Sandboxで動きを確認することができたので、自分のソースとの比較がしやすかった。
https://github.com/reachscript-jak/book-react-code
サンプルを試していて、つまづいた、ちっぽけなこと
（１）CSS Modulesは、[モジュール名].module.scssというファイル名にする
ちっぽけなことなのだが、自分自身が誤解していたなあと思ったことを残しておく。
CSS Modulesという名称から、cssファイルはモジュール単位で作成すると言うことで、
[モジュール名].module.scssという名称で作成しないといけない。
しかし、私は、modules.scssという名称で作ってしまっていて、以下のエラーが出てしまっていた。
モジュール './[モジュール名].modules.scss' またはそれに対応する型宣言が見つかりません。他の言語でも、xxx.module.scssのファイル名だったような気もすると思い直したが、本当ちっぽけなミスだった。
（２）styled componentsの場合、classNameの値に「”（ダブルコーテーション）」で囲ってはいけない
styled componentsライブラリを使ったスタイル指定を試していた時のミスなのだが、
classNameの指定は、下記のようにしないといけないが、
<div className={classes.wrapper}>ダブルコーテーションで囲ってしまっていた。
<div className="{classes.wrapper}">なんで、cssが認識しないんだろうとサンプルソースと見比べていたら、気づいた。
Emotionも同じように記載しないといけないようだ。
参考書籍
vuejsばかりしてきたので、reactの作法が全くわかっておらず、大変勉強になった。
JavaScriptの基本の習得も考えた書籍なので、JavaScript全般の説明やTypeScriptの説明も含まれており、軽く流す程度にはなったが、基本から学びたい人には、有益な情報だろうと思った。「教えて先輩」のTipsがいい感じだった。
本書で紹介されている、Recoilもさわっていこうと思う。