ModuleBuildError with NPM in phoenix-liveview app

Questions / Help
, , ,
1

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?

2

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

3

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
4

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
5

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

6

This is the solution that fixed the issue.
Thanks !

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

7

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 :slight_smile:

1 Like