Questions & Help>Questions

ModuleBuildError with NPM in phoenix-liveview app

/phoenix#troubleshooting#liveview#npm
Fl4m3Ph03n1x

Fl4m3Ph03n1x

Background

Background

I am trying to run the demo app desktop-example-app showed in Elixir Berlin meetup February 2021:

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 assets
  • npm 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-js
  • npx browserslist@latest --update-db
  • cd ../
  • 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?

6 comments
/phoenix#troubleshooting#liveview#npm
2152 6

Showing Posts 1 to 6

LostKobrakai

LostKobrakai

Did you do what the error suggests: npm rebuild node-sass?

0
Post #1
Fl4m3Ph03n1x

Fl4m3Ph03n1x OP

Running that fixed one of the errors, but now I get another one:


[error] Process #PID<0.564.0> terminating
** (exit) {{{%Phoenix.Router.NoRouteError{conn: %Plug.Conn{adapter: {Plug.Cowboy.Conn, :...}, assigns: %{}, before_send: [#Function<0.77458138/1 in Plug.Session.before_send/2>, #Function<1.53564190/1 in Phoenix.LiveReloader.before_send_inject_reloader/3>], body_params: %{}, cookies: %{"_todo_key" => "JiQY7bUdd/fVrSd+MPj6x5k8OkOB/HP9w4mXmi/G58IsUVSGxMur/oJtNLpebdlAsW1OzhSrTJdPSJc9iMM9KX2C+g1yHWFl9RsrIrsBFXKW4HrFd0AkhNqk15B0/wCH"}, halted: false, host: "localhost", method: "GET", owner: #PID<0.564.0>, params: %{}, path_info: ["css", "app.css"], path_params: %{}, port: 37995, private: %{TodoWeb.Router => {[], %{}}, :phoenix_endpoint => TodoWeb.Endpoint, :phoenix_router => TodoWeb.Router, :plug_session => %{"_csrf_token" => "JJZ64vdFyY65hc79nx4PqQ-7", "user" => true}, :plug_session_fetch => :done}, query_params: %{}, query_string: "", remote_ip: {127, 0, 0, 1}, req_cookies: %{"_todo_key" => "JiQY7bUdd/fVrSd+MPj6x5k8OkOB/HP9w4mXmi/G58IsUVSGxMur/oJtNLpebdlAsW1OzhSrTJdPSJc9iMM9KX2C+g1yHWFl9RsrIrsBFXKW4HrFd0AkhNqk15B0/wCH"}, req_headers: [{"accept", "text/css,*/*;q=0.1"}, {"accept-encoding", "gzip, deflate"}, {"accept-language", "en-US"}, {"connection", "Keep-Alive"}, {"cookie", "_todo_key=JiQY7bUdd/fVrSd+MPj6x5k8OkOB/HP9w4mXmi/G58IsUVSGxMur/oJtNLpebdlAsW1OzhSrTJdPSJc9iMM9KX2C+g1yHWFl9RsrIrsBFXKW4HrFd0AkhNqk15B0/wCH"}, {"host", "localhost:37995"}, {"referer", "http://localhost:37995/?k=CQPKONVKV462RA2RRKDWSD6COHBGS5TAWCSM2267SN36UGBVQTSQ"}, {"user-agent", "Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15"}], request_path: "/css/app.css", resp_body: nil, resp_cookies: %{}, resp_headers: [{"cache-control", "max-age=0, private, must-revalidate"}, {"x-request-id", "FqCos3D45Xqa0mAAAAAG"}], scheme: :http, script_name: [], secret_key_base: :..., state: :unset, status: nil}, message: "no route found for GET /css/app.css (TodoWeb.Router)", plug_status: 404, router: TodoWeb.Router}, [{TodoWeb.Router, :call, 2, [file: 'lib/phoenix/router.ex', line: 402]}, {TodoWeb.Endpoint, :plug_builder_call, 2, [file: 'lib/todo_web/endpoint.ex', line: 1]}, {TodoWeb.Endpoint, :"call (overridable 3)", 2, [file: 'lib/plug/debugger.ex', line: 132]}, {TodoWeb.Endpoint, :call, 2, [file: 'lib/todo_web/endpoint.ex', line: 1]}, {Phoenix.Endpoint.Cowboy2Handler, :init, 4, [file: 'lib/phoenix/endpoint/cowboy2_handler.ex', line: 65]}, {:cowboy_handler, :execute, 2, [file: '/home/pedro/Workplace/fl4m3/desktop-example-app/deps/cowboy/src/cowboy_handler.erl', line: 37]}, {:cowboy_stream_h, :execute, 3, [file: '/home/pedro/Workplace/fl4m3/desktop-example-app/deps/cowboy/src/cowboy_stream_h.erl', line: 300]}, {:cowboy_stream_h, :request_process, 3, [file: '/home/pedro/Workplace/fl4m3/desktop-example-app/deps/cowboy/src/cowboy_stream_h.erl', line: 291]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 226]}]}, {TodoWeb.Endpoint, :call, [%Plug.Conn{adapter: {Plug.Cowboy.Conn, :...}, assigns: %{}, before_send: [], body_params: %Plug.Conn.Unfetched{aspect: :body_params}, cookies: %Plug.Conn.Unfetched{aspect: :cookies}, halted: false, host: "localhost", method: "GET", owner: #PID<0.564.0>, params: %Plug.Conn.Unfetched{aspect: :params}, path_info: ["css", "app.css"], path_params: %{}, port: 37995, private: %{}, query_params: %Plug.Conn.Unfetched{aspect: :query_params}, query_string: "", remote_ip: {127, 0, 0, 1}, req_cookies: %Plug.Conn.Unfetched{aspect: :cookies}, req_headers: [{"accept", "text/css,*/*;q=0.1"}, {"accept-encoding", "gzip, deflate"}, {"accept-language", "en-US"}, {"connection", "Keep-Alive"}, {"cookie", "_todo_key=JiQY7bUdd/fVrSd+MPj6x5k8OkOB/HP9w4mXmi/G58IsUVSGxMur/oJtNLpebdlAsW1OzhSrTJdPSJc9iMM9KX2C+g1yHWFl9RsrIrsBFXKW4HrFd0AkhNqk15B0/wCH"}, {"host", "localhost:37995"}, {"referer", "http://localhost:37995/?k=CQPKONVKV462RA2RRKDWSD6COHBGS5TAWCSM2267SN36UGBVQTSQ"}, {"user-agent", "Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15"}], request_path: "/css/app.css", resp_body: nil, resp_cookies: %{}, resp_headers: [{"cache-control", "max-age=0, private, must-revalidate"}], scheme: :http, script_name: [], secret_key_base: nil, state: :unset, status: nil}, []]}}, []}
Initial Call: :cowboy_stream_h.request_process/3
Ancestors: [#PID<0.561.0>, #PID<0.449.0>, #PID<0.448.0>, TodoWeb.Endpoint, TodoWeb.Sup, TodoApp, #PID<0.384.0>]
Message Queue Length: 0
Messages: []
Links: [#PID<0.561.0>]
Dictionary: ["$logger_metadata$": %{request_id: "FqCos3D45Xqa0mAAAAAG"}]
Trapping Exits: false
Status: :running
Heap Size: 17731
Stack Size: 29
Reductions: 66416
0
Post #2
kokolegorille

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
0
Post #3
03juan

03juan

If you cd assets then you don’t need the --prefix assets flag.

0
Post #4
Fl4m3Ph03n1x

Fl4m3Ph03n1x OP

This is the solution that fixed the issue.
Thanks !

If I may ask, why did you advised this course of action?

0
Post #5
kokolegorille

kokolegorille

Because node-sass has been a real burden for Phoenix Team Core members when version broke the asset pipeline.

https://github.com/phoenixframework/phoenix/issues/4126

Not only this, but node-sass might be the main reason why Phoenix moved to esbuild :slight_smile:

1
Post #6
— All posts loaded —

Where Next? Top

View thread on forum (has 6 replies!)
phoenix
troubleshooting
liveview
npm
Home Questions & Help>Questions
1 1987 6
Last post
REPLY VIEW THREAD WITH 6 POSTS

Trending in Questions Top

katta
Questions & Help>Questions

Phoenix Ecto realistic benchmarks
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
/phoenix#ecto#troubleshooting
2 1863 12
New
achenet
Questions & Help>Questions

No Tailwind binary for FreeBSD
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
/phoenix#freebsd#tailwindcss#tailwind
11 1073 14
New
Cxx-mlr
Questions & Help>Questions

Using try/catch with update_in/3
I’m working on a small exercise involving update_in/3, and I came up with this solution: data = %{ name: "Periodic Table", category:...
#learning-elixir
9 273 12
New
ChrisAmelia
Questions & Help>Questions

Need help understanding order of function calls from Phoenix auth
I’ve got trouble wrapping my head around the order in which functions are called in this snippet (from Phoenix’s authentication): toke...
/phoenix#learning-elixir
0 76 2
New
dillonoconnor
Questions & Help>Questions

Hologram compiler and iex -S mix
Is there any way to avoid the Hologram compiler running when using iex? It seems like the front-end code could potentially be disregarded...
/hologram#iex
2 386 3
New
thiagogsr
Questions & Help>Questions

Oban Worker max_attempts doesn't compile with a constant
** (ArgumentError) expected :max_attempts to be a positive integer, got: {:@, [line: 10, column: 19], [{:max_attempts, [line: 10, column:...
/oban
0 66 1
New
unaware8150
Questions & Help>Questions

What could be a clean way to handle constant strings across a codebase?
Hello folks! So at work, we are seeing some situations where we have to define some “fixed” strings that are used across the codebase in...
#learning-elixir
10 153 8
New

Other Trending Topics Top

GenericJam
News>Announcing

Mob - Native BEAM / Elixir on Native Mobile
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
/mob#library#beam#mobile#liveview#react-native#mobile-app#mobile-development
259 8396 111
New
mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
171 6315 70
New
garrison
News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
#library#database#distributed#hobbes
306 6242 88
New
budgie
Chat & Discussions>Discussions

I genuinely hate programming now
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
#ai#career#rant
460 3763 113
New
KristerV
Chat & Discussions>AI / LLMs

State of developing agents with Elixir (not coding agents)
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
#agent#ai#llm#dev-tools#ai-tools
31 3653 21
New
mcass19
News>Announcing

ExRatatui - Elixir bindings for the Rust ratatui terminal UI library
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
#library#rust#terminal#tui
60 3370 16
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Honeybadger

Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

Defacto

Bringing learning, work and compliance together since 1987.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

Defacto

Bringing learning, work and compliance together since 1987.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews