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
• https://github.com/elixir-desktop/desktop-example-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 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?

This was a hard one for me. Basically, the issue is node-sass. To fix the issue I have to remove it and install sass instead:

cd assets/
npm uninstall node-sass
npm instal sass
cd ../
mix phx.digest
mix phx.server

And this fixes the issue.

More info: https://elixirforum.com/t/modulebuilderror-with-npm-in-phoenix-liveview-app/42060/6