Fl4m3Ph03n1x
ModuleBuildError with NPM in phoenix-liveview app
Background
Background
I am trying to run the demo app desktop-example-app showed in Elixir Berlin meetup February 2021:
- https://www.youtube.com/watch?v=aFpBHQ0YEw4&t=2016s
- GitHub - elixir-desktop/desktop-example-app: Elixir Sample App using the Desktop library with LiveView to create a desktop app
I can launch the application, however when it opens it keeps crashing.
Problem
While it keeps erroring out I have noticed the following error:
ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.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.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/webpack/lib/NormalModule.js:316:20
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
@ ./js/app.js 4:0-25
@ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 1.76 KiB {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.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.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
What I tried
So, to fixed this I did:
cd assetsnpm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-jsnpx browserslist@latest --update-dbcd ../mix phx.digest
And the I run it normally: ./run
Question
I believe I have following every instruction, however I still cannot get the app to work.
What am I doing wrong?
Marked As Solved
kokolegorille
I would advise You to replace node-sass, by sass…
Remove “node-sass”: “^4.13.1”
(npm uninstall …)
Add sass
npm i -D --prefix assets/ sass
Also Liked
kokolegorille
Because node-sass has been a real burden for Phoenix Team Core members when version broke the asset pipeline.
Not only this, but node-sass might be the main reason why Phoenix moved to esbuild 
1
Popular in Questions
Hi there,
I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
Hi,
is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
I have an umbrella app.
Some of the apps inside depend on other apps in the umbrella, unsurprisingly.
I'm writing a test for one of t...
New
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible.
total = 10
while total != 0
...
New
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Hi,
I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
I tried installing
elixir 1.11.2
erlang 23.3.4
via asdf in my zsh shell. Enabled the versions locally and globally.
When I list them ...
New
I will often find my self writing things similar to:
case some_value do
nil -> something()
"" -> something()
_ -> someth...
New
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217
Let’s say I have a map with required and optional k...
New
Hi,
I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Other popular topics
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
i’m a new one to elixir
which editor can i use
vs code? or atom?
Thanks! :smiley:
New
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
Hi,
I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Hey all,
I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
I will often find my self writing things similar to:
case some_value do
nil -> something()
"" -> something()
_ -> someth...
New
I am trying to run a deploy with docker and I successfully runned with this command:
docker build -t romenigld/blog-prod .
but when I t...
New
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"