【エラー】Error: Missing binding /myapp/node_modules/node-sass/vendor/linux-x64-64/binding.node【Ruby on Rails】

Ruby on railsRuby on Rails
2020.11.22
スポンサーリンク

エラー内容

上記のエラーが発生しました。

rails実行中にフロントエンドで表題のエラーが発生していたため解決方法を残しておきます。

rails-ujs.js:803 Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /myapp/node_modules/node-sass/vendor/linux-x64-64/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 12.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

node-sassフォルダ内のソースが見つからないと怒られています。

エラー調査

実際にフォルダをみにいくと確かに「linux-x64-64/binding.node」はなく、「darwin-x64-72/binding.node」しかありませんでした。

npm rebuild node-sass

を実行してみます。

以下のように作成されましたが、相変わらず「linux」ではなく「darwin」ですが。。。

> node-sass@4.14.1 install /Users/user/Desktop/work/docker/XXX/node_modules/node-sass
> node scripts/install.js

node-sass build Binary found at /Users/user/Desktop/work/docker/XXX/node_modules/node-sass/vendor/darwin-x64-72/binding.node

> node-sass@4.14.1 postinstall /Users/user/Desktop/work/docker/XXX/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/user/Desktop/work/docker/XXX/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Testing binary
Binary is fine
node-sass@4.14.1 /Users/user/Desktop/work/docker/XXX/node_modules/node-sass

やはりエラーは治りません。

ファイルをダウンロードしてきました。

Releases · sass/node-sass
:rainbow: Node.js bindings to libsass. Contribute to sass/node-sass development by creating an account on GitHub.

nodeのバージョン

調べてみるとnodeのバージョンが原因かもしれないことがわかった。

$ node -v
v12.18.4

しかしエラーメッセージでは10系（Node.js 10.x）の記載があったからこちらが原因かと疑う。

Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x

yarnを実行してもエラーは出ない。

$ yarn
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.54s.

以下にnodeとnode-sassのバージョンの対応表があります。

NodeJSnode-sassのサポート-vNode Module

Node 14
4.14+83
Node 134.13+, <5.079
Node 124.12+72
Node 114.10+, <5.067
Node 104.9+64
GitHub - sass/node-sass: :rainbow: Node.js bindings to libsass
:rainbow: Node.js bindings to libsass. Contribute to sass/node-sass development by creating an account on GitHub.
github.com

Nodeに対応しているモジュールをインストールする。

$ sudo yarn add node-sass@4.12.0
Password:
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > rails-erb-loader@5.5.2" has unmet peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ node-sass@4.12.0
info All dependencies
├─ invert-kv@1.0.0
├─ lcid@1.0.0
├─ node-sass@4.12.0
├─ os-locale@1.4.0
└─ sass-graph@2.2.6
✨  Done in 37.97s.

上記のように警告は出ていますが、インストールできました。

この警告がのちに悪さしなければいいのですが・・・

予想通り別のエラーが出ました。ただsassについてはエラーが出なくなりました！

application.js:1 Uncaught Error: Cannot find module '../stylesheets/application'
    at webpackMissingModule (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

やはりさっきの警告が関係していそうですね。

$ yarn why node-sass
yarn why v1.22.10
[1/4] 🤔  Why do we have the module "node-sass"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "node-sass@4.12.0"
info Has been hoisted to "node-sass"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "6.02MB"
info Disk size with unique dependencies: "16.35MB"
info Disk size with transitive dependencies: "27.59MB"
info Number of shared dependencies: 90
=> Found "@rails/webpacker#node-sass@4.14.1"
info This module exists because "@rails#webpacker" depends on it.
info Disk size without dependencies: "5.97MB"
info Disk size with unique dependencies: "16.3MB"
info Disk size with transitive dependencies: "27.54MB"
info Number of shared dependencies: 90

webpackerとの依存問題みたいですね。

4.14.1をインストールしてみました。

$ sudo yarn add node-sass@4.14.1
Password:
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > rails-erb-loader@5.5.2" has unmet peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 0 new dependencies.

元のエラーに戻ってしまったので、これは違いました。。。。
エラー文をちゃんと読んでいきます。

コンソールに以下の記載があり、「sass-loader」が動いてないのが原因っぽい

web_1  | ERROR in ./app/javascript/packs/application.js
web_1  | Module not found: Error: Can't resolve 'sass-loader' in '/myapp'
web_1  |  @ ./app/javascript/packs/application.js 15:0-41

application.jsをみてみるとimportとrequireが混在してるのが気持ち悪かったし、違いがわかってなかった。

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import Rails from 'rails-ujs';
Rails.start();
import '../stylesheets/application.scss'
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);
console.log('Hello World from Webpacker');

以下のように変更してみました。

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require('../stylesheets/application')
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);
console.log('Hello World from Webpacker');

するとエラーメッセージは変わりませんが、今までapplication.jsの１行目でエラーが出ていたのが、ちゃんとスタイルシートを読み込んでいる部分でエラーが出るようになりました。

エラーにあったsass-loaderをインストールしてみます。

$ sudo npm install --save-dev node-sass

たくさんエラーが出ました。

> fsevents@1.2.13 install /Users/user/Desktop/work/docker/xxxx/node_modules/fsevents
> node install.js

gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/user/Desktop/work/docker/xxxx/node_modules/fsevents/build'
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/user/Desktop/work/docker/xxxx/node_modules/fsevents
gyp ERR! node -v v12.18.4
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
.......

> node-sass@4.14.1 install /Users/user/Desktop/work/docker/xxxx/node_modules/@rails/webpacker/node_modules/node-sass
> node scripts/install.js

Unable to save binary /Users/user/Desktop/work/docker/xxxx/node_modules/@rails/webpacker/node_modules/node-sass/vendor/darwin-x64-72 : Error: EACCES: permission denied, mkdir '/Users/user/Desktop/work/docker/xxxx/node_modules/@rails/webpacker/node_modules/node-sass/vendor'
.......

> node-sass@4.12.0 install /Users/user/Desktop/work/docker/xxxx/node_modules/node-sass
> node scripts/install.js

Unable to save binary /Users/user/Desktop/work/docker/xxxx/node_modules/node-sass/vendor/darwin-x64-72 : Error: EACCES: permission denied, mkdir '/Users/user/Desktop/work/docker/xxxx/node_modules/node-sass/vendor'
.......

ググってみると権限周りでエラー起きてる人がたくさんいたので参考にさせてもらいました。

Ubuntuにnode-sassを入れようとしたらつまづいた話 - Qiita
Rubyアレルギー(超偏見)なので、Ruby製のsassを使いたくなくてnode-sassを入れようとしたらつまづいたので備忘録インストールコマンドは以下になるんですが。。。 npm instal…
qiita.com

記事に沿って以下を実行しました。

$ npm cache clean -f
$ sudo npm install -g npm
$ sudo npm install -g n
$ sudo n latest
$ sudo npm install -g node-gyp
$ npm config set user 0
$ npm config set unsafe-perm true

上記実行後、インストールでエラーはなくなりました。

$ sudo npm install --save-dev node-sass

up to date, audited 1139 packages in 6s

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

1 low severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

でもまだ画面側ではcssが読み込まれていません。

＃コンソールのエラー

application.js:1 Uncaught Error: Cannot find module '../stylesheets/application'
    at webpackMissingModule (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

webpackでbuildした際のエラーは以下

$ ./bin/webpack

Hash: 2279477213c6217f6dc4
Version: webpack 4.44.2
Time: 2292ms
Built at: 11/22/2020 7:42:24 PM
                                                     Asset       Size       Chunks                         Chunk Names
                    js/application-5d662597379bdce56559.js    126 KiB  application  [emitted] [immutable]  application
                js/application-5d662597379bdce56559.js.map    140 KiB  application  [emitted] [dev]        application
                      js/hello_erb-92962b35bb61c991d728.js   4.16 KiB    hello_erb  [emitted] [immutable]  hello_erb
                  js/hello_erb-92962b35bb61c991d728.js.map   3.86 KiB    hello_erb  [emitted] [dev]        hello_erb
                                             manifest.json  789 bytes               [emitted]
media/images/no-image-efac056fbbff828736bb26a878b99aa5.png   22.5 KiB               [emitted]
Entrypoint application = js/application-5d662597379bdce56559.js js/application-5d662597379bdce56559.js.map
Entrypoint hello_erb = js/hello_erb-92962b35bb61c991d728.js js/hello_erb-92962b35bb61c991d728.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/images sync recursive \.(png|jpg|jpeg|svg)$] ./app/javascript/images sync \.(png|jpg|jpeg|svg)$ 179 bytes {application} [built]
[./app/javascript/images/no-image.png] 104 bytes {application} [optional] [built]
[./app/javascript/packs/application.js] 895 bytes {application} [built]
[./app/javascript/packs/hello_erb.js.erb] 257 bytes {hello_erb} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
    + 3 hidden modules

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'sass-loader' in '/Users/user/Desktop/work/docker/xxxx'
 @ ./app/javascript/packs/application.js 13:0-37

sass-loaderがないと怒られているのでインストールして行きます。

$ sudo npm install sass-loader --save-dev
Password:

added 5 packages, removed 2 packages, and audited 1142 packages in 5s

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

1 low severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

インストール後に今度は違うエラーが発生しました。

Uncaught Error: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS received undefined instead of CSS string

以下はwebpackのbuild時のエラー

$ ./bin/webpack
・・・・・
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.12.0
 @ ./app/javascript/stylesheets/application.scss 2:26-228
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS received undefined instead of CSS string

rebuildしようとしたら、エラーになりました。。

$ npm rebuild node-sass
npm ERR! code 1
npm ERR! path /Users/user/Desktop/work/docker/xxxxx/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/user/Desktop/work/docker/dokosumu/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
・・・・・・・

nodeのバージョンを調べてみるといつの間にか15になっていたので、ダウングレードして、再度buildします。

$ node -v
v15.2.1
#ダウングレード
$ sudo n 10.19.0
#再ビルド
$ npm rebuild node-sass

これでwebpackでエラーが消えましたーーーー

$ ./bin/webpack
Hash: f00d792858104c9cf08f
Version: webpack 4.44.2
Time: 3460ms
Built at: 11/22/2020 8:46:25 PM
                                                     Asset       Size       Chunks                         Chunk Names
                    js/application-39e137cae722bb47354c.js    878 KiB  application  [emitted] [immutable]  application
                js/application-39e137cae722bb47354c.js.map    914 KiB  application  [emitted] [dev]        application
                      js/hello_erb-92962b35bb61c991d728.js   4.16 KiB    hello_erb  [emitted] [immutable]  hello_erb
                  js/hello_erb-92962b35bb61c991d728.js.map   3.86 KiB    hello_erb  [emitted] [dev]        hello_erb
                                             manifest.json  789 bytes               [emitted]
media/images/no-image-efac056fbbff828736bb26a878b99aa5.png   22.5 KiB               [emitted]
Entrypoint application = js/application-39e137cae722bb47354c.js js/application-39e137cae722bb47354c.js.map
Entrypoint hello_erb = js/hello_erb-92962b35bb61c991d728.js js/hello_erb-92962b35bb61c991d728.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/images sync recursive \.(png|jpg|jpeg|svg)$] ./app/javascript/images sync \.(png|jpg|jpeg|svg)$ 179 bytes {application} [built]
[./app/javascript/images/no-image.png] 104 bytes {application} [optional] [built]
[./app/javascript/packs/application.js] 895 bytes {application} [built]
[./app/javascript/packs/hello_erb.js.erb] 257 bytes {hello_erb} [built]
[./app/javascript/stylesheets/application.scss] 664 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss 740 KiB {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]

まとめ

ライブラリって便利ですが、この辺でハマるといいのか悪いのかわからないですね。。。
自分でコード書いた方がストレスは少なそうですね。
ただテスト工数は増えますが。。。。
まあ理解できてない自分が悪いんですけどねーーー

エンジニア転職なら【Tech Stars Agent】

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】

過去は以下のようなエラーも出ました。

【エラー】Could not find bcrypt-3.1.16 in any of the sources【Ruby on Rails】
エラーの内容docker環境でRuby on Railsのアプリを作っています。deviseを使ってログイン機能を実装しようとして、deviseをインストール後以下のエラーが出ました。Could not find bcry...
nabelog.org
2020.10.23

スポンサーリンク

コメント

タイトルとURLをコピーしました