ModuleBuildError with NPM in phoenix-liveview app

Fl4m3Ph03n1x · September 1, 2021, 8:24am

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?

LostKobrakai · September 1, 2021, 8:47am

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

Fl4m3Ph03n1x · September 1, 2021, 9:34am

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

kokolegorille · September 1, 2021, 11:27am

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

03juan · September 1, 2021, 12:38pm

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

Fl4m3Ph03n1x · September 1, 2021, 2:12pm

This is the solution that fixed the issue.
Thanks !

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

kokolegorille · September 1, 2021, 2:17pm

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

github.com/phoenixframework/phoenix

npm install fails on fresh project

opened 04:07PM - 04 Jan 21 UTC

closed 01:05PM - 06 Apr 21 UTC

scripttease

### Environment * Elixir version (elixir -v): Elixir 1.11.2 * Phoenix versio…n (mix deps): 1.5.7 (phoenix) 774cd644 * NodeJS version (node -v): v15.5.0 * NPM version (npm -v): 7.3.0 * Operating system: Ubuntu 20.04 ### Expected behavior npm install should succeed after creating a new project with `mix phx.new kalda --live` ### Actual behavior npm install fails with this message ``` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: webpack@5.11.1 npm ERR! node_modules/webpack npm ERR! dev webpack@"4.41.5" from the root project npm ERR! peer webpack@">=2" from babel-loader@8.2.2 npm ERR! node_modules/babel-loader npm ERR! dev babel-loader@"^8.0.0" from the root project npm ERR! 3 more (copy-webpack-plugin, css-loader, hard-source-webpack-plugin) npm ERR! npm ERR! Could not resolve dependency: npm ERR! dev mini-css-extract-plugin@"^0.9.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: webpack@4.44.2 npm ERR! node_modules/webpack npm ERR! peer webpack@"^4.4.0" from mini-css-extract-plugin@0.9.0 npm ERR! node_modules/mini-css-extract-plugin npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /home/al/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /home/al/.npm/_logs/2021-01-04T16_04_12_308Z-debug.log ``` Here is the package.json ```json { "repository": {}, "description": " ", "license": "MIT", "scripts": { "deploy": "webpack --mode production", "watch": "webpack --mode development --watch" }, "dependencies": { "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html" }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "babel-loader": "^8.0.0", "copy-webpack-plugin": "^5.1.1", "css-loader": "^3.4.2", "sass-loader": "^8.0.2", "node-sass": "^4.13.1", "hard-source-webpack-plugin": "^0.13.1", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "terser-webpack-plugin": "^2.3.2", "webpack": "4.41.5", "webpack-cli": "^3.3.2" } } ``` Thank you

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