New install of Phoenix fails in a Mac

Phoenix Forum Questions / Help
,
1

Hi, I’ve tried to create a new phoenix project using phx.new, with standard options in a Mac running Mac OS Catalina, configured with brew but it is failing to run web

> brew info elixir
> elixir: stable 1.11.2 (bottled), HEAD
> 
> mix --version
> Erlang/OTP 23 [erts-11.1.1] [source] [64-bit] [smp:12:12] [ds:12:12:10] [async-threads:1] [hipe] [dtrace]
> 
> Mix 1.11.2 (compiled with Erlang/OTP 23)
> 
> New:
>   phx_new 1.5.6

The results I get are these:

> % cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
> 
> up to date, audited 894 packages in 2s
> 
> 42 packages are looking for funding
>   run `npm fund` for details
> 
> found 0 vulnerabilities
> [hardsource:09b651e9] Writing new cache 09b651e9...
> [hardsource:09b651e9] Tracking node dependencies with: package-lock.json.
> Hash: 4562ebd594bb91c502e3
> Version: webpack 4.41.5
> Time: 643ms
> Built at: 11/07/2020 10:33:40 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     16 KiB     app  [emitted]  app
> Entrypoint app = app.js
> [0] multi ./js/app.js 28 bytes {app} [built]
> [../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
> [./css/app.scss] 2.65 KiB {app} [built] [failed] [1 error]
> [./js/app.js] 490 bytes {app} [built]
> 
> 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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/binding.js:13:13)
>     at Object.<anonymous> (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/index.js:14:35)
>     at Module._compile (/Users/sergio/workspace/Phoenix/test/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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
>     at getDefaultSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
>     at getSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
>     at Object.loader (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/index.js:40:61)
>     at /Users/sergio/workspace/Phoenix/test/assets/node_modules/webpack/lib/NormalModule.js:316:20
>     at /Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
>     at /Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
>     at runSyncOrAsync (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
>     at iterateNormalLoaders (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
>     at Array.<anonymous> (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
>     at Storage.finished (/Users/sergio/workspace/Phoenix/test/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
>     at /Users/sergio/workspace/Phoenix/test/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
>     at /Users/sergio/workspace/Phoenix/test/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.44 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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/binding.js:13:13)
>         at Object.<anonymous> (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/index.js:14:35)
>         at Module._compile (/Users/sergio/workspace/Phoenix/test/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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
>         at getDefaultSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
>         at getSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
>         at Object.loader (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/index.js:40:61)

And css is not shown properly. I can see this error in the console

% mix phx.server
[info] Running TestWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access TestWeb.Endpoint at http://localhost:4000

webpack is watching the files…

[hardsource:e1c5cec4] Using 1 MB of disk space.
[hardsource:e1c5cec4] Writing new cache e1c5cec4…
[hardsource:e1c5cec4] Tracking node dependencies with: package-lock.json.
Hash: 4562ebd594bb91c502e3
Version: webpack 4.41.5
Time: 455ms
Built at: 11/07/2020 10:34:38 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 16 KiB app [emitted] app
Entrypoint app = app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[…/deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[./css/app.scss] 2.65 KiB {app} [built] [failed] [1 error]
[./js/app.js] 490 bytes {app} [built]

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:
Release v4.14.1 · sass/node-sass · GitHub
at module.exports (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/binding.js:13:13)
at Object. (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/Users/sergio/workspace/Phoenix/test/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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/index.js:40:61)
at /Users/sergio/workspace/Phoenix/test/assets/node_modules/webpack/lib/NormalModule.js:316:20
at /Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/Users/sergio/workspace/Phoenix/test/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/sergio/workspace/Phoenix/test/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/sergio/workspace/Phoenix/test/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/sergio/workspace/Phoenix/test/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.44 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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/sergio/workspace/Phoenix/test/assets/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (/Users/sergio/workspace/Phoenix/test/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 (/Users/sergio/workspace/Phoenix/test/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at getDefaultSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/Users/sergio/workspace/Phoenix/test/assets/node_modules/sass-loader/dist/index.js:40:61)

Any idea on how to fix this. I’ve tried to bump the versions of packages in npm, but I start to get problmems with the configuration. Updating webpack to 5 breaks a lot of things, and every combination of versions creates one error or another.

Any help would be appreciated. I abandoned development when I couldn’t run phoenix in Kubernetes and now it seems to be working, so I want to give it a try again.

1 Like
2

What is your node version? node -v

Edit: I suspect you’re using v15.x and you may need to downgrade/use version manager to v14.x

1 Like
3

Coincidently, I also got the same error today:

I solved it with running:

npm rebuild node-sass

in the assets directory.

I hope it is helpful for you as well.

2 Likes
4

Testing again.

I’ve created a new test project and did what you suggested. I had first to reinstall the xcode command line tools (using

% xcode-select --print-path
/Library/Developer/CommandLineTools
% sudo xcode-select --reset
Password:
% xcode-select --print-path
/Applications/Xcode.app/Contents/Developer

Now it works perfectly. Thanks!

2 Likes
5

This still doesn’t work on Mojave, I just tried both nodejs 15.2.0 and 14.15.0 as well as npm rebuild node-sass, nothing works.

6

For anyone that encounters this issue (Phoenix won’t compile due to node-sass), the solution was to replace "node-sass": "xx.xx.xx" with "sass": "^1.22.10" as explained here:

3 Likes
7

I created a new application today and it failed (again). So my solution didn’t work.
My new steps to fix this:

  • replaced “node-sass” with “sass” “^1.29.0”
  • UPdated “mini-css-extract-plugin”: “^1.3.1”,
  • npm rebuild “mini-css-extract-plugin”
  • npm install && node node_modules/webpack/bin/webpack.js --mode development
8

This has been the fix for me consistently. Seems like node-sass is always a node version behind. Considering that dart node seems to be the de-facto replacement for node-sass, perhaps the better fix is for the Phoenix team to replace node-sass with the sass package (dart sass), as you outlined above

9

Source for above claim:

node-sass uses libsass, so unless node-sass plans on change from libsass, it will be deprecated.

10

That already happened:

2 Likes
11

Ah! I should update more often :cold_sweat:
That is really good to hear though. Thanks for setting me straight!

12

This is not working for me.
I am still getting this error. Do you have other idea?

npm install && node node_modules/webpack/bin/webpack.js --mode development

up to date, audited 912 packages in 3s

46 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[hardsource:7e3a729f] Using 1 MB of disk space.
[hardsource:7e3a729f] Tracking node dependencies with: package-lock.json.
[hardsource:7e3a729f] Reading from cache 7e3a729f...
Hash: 2344c41cdb7c18e07909
Version: webpack 4.41.5
Time: 369ms
Built at: 12/13/2020 7:17:33 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   15.7 KiB     app  [emitted]  app
Entrypoint app = app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[./css/app.scss] 2.32 KiB {app} [built] [failed] [1 error]
    + 2 hidden modules
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 (/Users/coyr/web-dev/elixir/hello/assets/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/coyr/web-dev/elixir/hello/assets/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (/Users/coyr/web-dev/elixir/hello/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (/Users/coyr/web-dev/elixir/hello/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at getDefaultSassImplementation (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/index.js:40:61)
    at /Users/coyr/web-dev/elixir/hello/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/coyr/web-dev/elixir/hello/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/coyr/web-dev/elixir/hello/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/coyr/web-dev/elixir/hello/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/coyr/web-dev/elixir/hello/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/coyr/web-dev/elixir/hello/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/coyr/web-dev/elixir/hello/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/coyr/web-dev/elixir/hello/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/coyr/web-dev/elixir/hello/assets/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75: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.41 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 (/Users/coyr/web-dev/elixir/hello/assets/node_modules/node-sass/lib/binding.js:13:13)
        at Object.<anonymous> (/Users/coyr/web-dev/elixir/hello/assets/node_modules/node-sass/lib/index.js:14:35)
        at Module._compile (/Users/coyr/web-dev/elixir/hello/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
        at Module.load (node:internal/modules/cjs/loader:973:32)
        at Function.Module._load (node:internal/modules/cjs/loader:813:14)
        at Module.require (node:internal/modules/cjs/loader:997:19)
        at require (/Users/coyr/web-dev/elixir/hello/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
        at getDefaultSassImplementation (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
        at getSassImplementation (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
        at Object.loader (/Users/coyr/web-dev/elixir/hello/assets/node_modules/sass-loader/dist/index.js:40:61)```
13

I keep getting the same error. Do you have other idea?

14

Someone help me in slack. In my case:

  • npm cache clean -f
  • npm install -g npm
  • sudo rm -r -f /Library/Developer/CommandLineTools
  • xcode-select --install
  • npm rebuild node-sass

In assets:
npm install && node node_modules/webpack/bin/webpack.js --mode development

It works for me. Now I am confused, why node-sass is working?

1 Like
16

see this commit for getting rid of node-sass https://github.com/phoenixframework/phoenix/pull/4044/commits/5800553023641149520053365f76e3b11a6da1d4

keep us posted…

2 Likes
17

Where is the file I need to change? When I search for it, there are many files with that name.

18

It’s package.json in the asset folder…

19

This bites me every time I create a phoenix project. I don’t think any of my computers have the required python 2 installed, heh. :sweat_smile:

20

what requires python2 nowadays? (my mac is basically on a decade old install (upgraded along the way of course) so python2 is still around lol)

21

I think it’s required for some build step that the deprecated node-sass library needs when doing npm install on a fresh Phoenix. Luckily it will be replaced with another library once that commit you linked earlier gets shipped. :blush:

1 Like