How to fix “Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)” in Elixir Phoenix

Photo by Leif Christoph Gottwald on Unsplash

If you are new to Elixir Phoenix, on your very first attempt to create the app and run the server with mix phx.server you might have encountered this build error related to Node, Sass, and CSS.

❯ mix phx.server
[info] Running SampleWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access SampleWeb.Endpoint at http://localhost:4000
webpack is watching the files…
[hardsource:3aabe17a] Writing new cache 3aabe17a...
[hardsource:3aabe17a] Tracking node dependencies with: package.json, node_modules/*.
Hash: 0efe8912134b66bc238c
Version: webpack 4.41.5
Time: 1806ms
Built at: 03/05/2021 10:42:01 AM
                Asset       Size  Chunks             Chunk Names
       ../favicon.ico   1.23 KiB          [emitted]  
../images/phoenix.png   13.6 KiB          [emitted]  
        ../robots.txt  202 bytes          [emitted]  
               app.js    367 KiB     app  [emitted]  app
Entrypoint app = app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[../deps/phoenix/priv/static/phoenix.js] 38.9 KiB {app} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[../deps/phoenix_live_view/priv/static/phoenix_live_view.js] 111 KiB {app} [built]
[./css/app.scss] 2.62 KiB {app} [built] [failed] [1 error]
[./js/app.js] 1.36 KiB {app} [built]
    + 1 hidden module
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: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (~/Codes/sample/assets/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (~/Codes/sample/assets/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (~/Codes/sample/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
    at Module.load (node:internal/modules/cjs/loader:948:32)
    at Function.Module._load (node:internal/modules/cjs/loader:789:14)
    at Module.require (node:internal/modules/cjs/loader:972:19)
    at require (~/Codes/sample/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at getDefaultSassImplementation (~/Codes/sample/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (~/Codes/sample/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (~/Codes/sample/assets/node_modules/sass-loader/dist/index.js:40:61)
    at ~/Codes/sample/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at ~/Codes/sample/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at ~/Codes/sample/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (~/Codes/sample/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (~/Codes/sample/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (~/Codes/sample/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (~/Codes/sample/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at ~/Codes/sample/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at ~/Codes/sample/assets/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context: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.43 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: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
    For more information on which environments are supported please see:
    https://github.com/sass/node-sass/releases/tag/v4.14.1
        at module.exports (~/Codes/sample/assets/node_modules/node-sass/lib/binding.js:13:13)
        at Object.<anonymous> (~/Codes/sample/assets/node_modules/node-sass/lib/index.js:14:35)
        at Module._compile (~/Codes/sample/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
        at Module.load (node:internal/modules/cjs/loader:948:32)
        at Function.Module._load (node:internal/modules/cjs/loader:789:14)
        at Module.require (node:internal/modules/cjs/loader:972:19)
        at require (~/Codes/sample/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
        at getDefaultSassImplementation (~/Codes/sample/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
        at getSassImplementation (~/Codes/sample/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
        at Object.loader (~/Codes/sample/assets/node_modules/sass-loader/dist/index.js:40:61)

Thankfully, the fix is very simple.

Open the file package.json in the /assets folder. Update these 3 lines:

"hard-source-webpack-plugin": "^0.13.1",
"node-sass": "^4.13.1",
"mini-css-extract-plugin": "^0.9.0",

With these 2 lines:

"mini-css-extract-plugin": "^1.3.1",
"sass": "^1.27.0",

Then, open /assets/webpack.config.js , remove these lines:

line 3: 
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
line 51:
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])

Then in your terminal, run:

$ cd assets
$ npm update
$ node node_modules/webpack/bin/webpack.js --mode development

Let npm does its magic, install and update the packages. Once that is completed, you can run the Phoenix server again and this time it should work!

$ cd ..
$ mix phx.server

Was it helpful?

If you find this article helpful, do give me a little clap on Medium. 😄 It really makes my day to know that I have helped a fellow developer out there. Thanks!