CodyHouse framework on an Apple M1 computer npm set up

[alenm]

About

Looking to try out version 3.0 of Codyhouse on my Apple M1 laptop. But I'm running into errors with NPM and specifically sass-embedded.

Example of error

npm ERR! path /Users/alen/Desktop/Newbie~og/node_modules/sass-embedded
npm ERR! command failed
npm ERR! command sh -c node ./download-compiler-for-end-user.js
npm ERR! /Users/alen/Desktop/Newbie~og/node_modules/sass-embedded/dist/tool/utils.js:39
npm ERR!             throw Error(`Architecure ${process.arch} is not supported.`);
npm ERR!             ^
npm ERR! 
npm ERR! Error: Architecure arm64 is not supported.
npm ERR!     at /Users/alen/Desktop/Newbie~og/node_modules/sass-embedded/dist/tool/utils.js:39:19
npm ERR!     at Object.<anonymous> (/Users/alen/Desktop/Newbie~og/node_modules/sass-embedded/dist/tool/utils.js:41:3)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1108:14)
npm ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:973:32)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:813:14)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:997:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:92:18)
npm ERR!     at Object.<anonymous> (/Users/alen/Desktop/Newbie~og/node_modules/sass-embedded/download-compiler-for-end-user.js:9:29)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1108:14)

Trying to Debug

I thought I would spend sometime trying to debug this. So I changed the package.json file into this

{
  "name": "newbie",
  "version": "0.0.1",
  "scripts": {
    "gulp": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "autoprefixer": "^9.4.3",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^8.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^5.0.0",
    "gulp-sass-glob": "git+https://github.com/CodyHouse/gulp-sass-glob",
    "gulp-uglify": "^3.0.2",
    "postcss-calc": "^7.0.1",
    "postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables",
    "sass": "^1.42.1",
    "sass-embedded": "^1.0.0-beta.3"
  }
}

What changed

package.json Changed: "gulp-sass": "^4.0.2" is now "^5.0.0" Added: "sass": "^1.42.1"

gullpfile.js var sass = require('gulp-sass'); var sass = require('gulp-sass')(require('sass'));

[19:32:00] Using gulpfile ~/Desktop/Newbie/gulpfile.js
[19:32:00] Starting 'watch'...
[19:32:00] Starting 'browserSync'...
[19:32:00] Starting '<anonymous>'...
[19:32:00] Finished '<anonymous>' after 3.35 ms
[19:32:00] Finished 'browserSync' after 3.62 ms
[19:32:00] Starting 'sass'...
[19:32:00] 'sass' errored after 26 ms
[19:32:00] Error: spawn /Users/alen/Desktop/Newbie/node_modules/sass-embedded/dist/lib/src/vendor/dart-sass-embedded/dart-sass-embedded ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:276:19)
    at onErrorNT (node:internal/child_process:476:16)
    at processTicksAndRejections (node:internal/process/task_queues:80:21)
[19:32:00] 'watch' errored after 31 ms
npm ERR! code 1
npm ERR! path /Users/alen/Desktop/Newbie
npm ERR! command failed
npm ERR! command sh -c gulp "watch"

It looks like my sass-embedded is missing the dart-sass-emdedded as it's printing ENOENT

Feedback

Looking to see if anyone within this community might provide some direction on how to get the CodyHouse framework 3.0 on an Apple M1 computer. Here is my version of hardware and software.

Current Version of Node

v15.5.0

Hardware

MacBook Apple M1

NPM

7.3.0

[alenm]

Solution

I have solved the issue, but the steps taken are temporarily.

Recap

Change package.json to

{
  "name": "newbie",
  "version": "0.0.1",
  "scripts": {
    "gulp": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "autoprefixer": "^9.4.3",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^8.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^5.0.0",
    "gulp-sass-glob": "git+https://github.com/CodyHouse/gulp-sass-glob",
    "gulp-uglify": "^3.0.2",
    "postcss-calc": "^7.0.1",
    "postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables",
    "sass": "^1.42.1",
    "sass-embedded": "^1.0.0-beta.3"
  }
}

Update gulpfile.json update this one line.

var sass = require('gulp-sass');

var sass = require('gulp-sass')(require('sass'));

Now the real fix...

Step 1

Download https://github.com/sass/dart-sass-embedded/releases/tag/1.0.0-beta.11

Step 2 Rename

Rename it from sass_embedded to dart-sass-emdedded

Step 3 Move

and then move it into your node_modules folder specifically to the vendor folder sass-embedded/dist/lib/src/vendor where the error was generating the ENOENT

YOURAPPNAME/node_modules/sass-embedded/dist/lib/src/vendor

Here is a screenshot

Step 4 Test it out

Go back to your CodyHouse root project and re-run npm run gulp watch.

It should work now.

Conclusion

My solution works and is enough for me to just play with the new 3.0 framework on my Apple m1 MacBook, but in no way can I share this setup or check into my own repo as I will always need to manually download dart-sass-embedded, rename it to add dart-sass-emdedded.

I don't think this issue should remain open as this issue is NOT related to CodyHouse framework.

But at the same time I cannot be the only person dealing with this issue. If anyone has a better setup please provide it

[claudia-romano]

Hi Alen, sorry about the issue.

As you have already added the sass module to your package.json file, could you try using it as the default compiler? You can set it in your gulp config file:

var sass = require('gulp-sass');
sass.compiler = require('sass');

If this does work, then this is a specific issue with sass-embedded and we can open an issue there and see if they can fix the problem. Thank you!

[alenm]

@claudia-romano

Yes that suggestion works I just need to remove any reference to sass-emdeeded. Now my setup is:

gulpfile.js

var sass = require('gulp-sass')(require('sass'));
sass.compiler = require('sass');

package.json

  "devDependencies": {
    "autoprefixer": "^9.4.3",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^8.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^5.0.0",
    "gulp-sass-glob": "git+https://github.com/CodyHouse/gulp-sass-glob",
    "gulp-uglify": "^3.0.2",
    "postcss-calc": "^7.0.1",
    "postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables",
    "sass": "^1.42.1"
  }

If this does work, then this is a specific issue with sass-embedded and we can open an issue there and see if they can fix the problem. Thank you!

Yes this is the issue from my original post. Is the sass-embedded is generating an error ENOENT 2 /* No such file or directory */ because it's trying to reference a dart-sass-emdedded

Error: spawn /Users/alen/Desktop/Newbie/node_modules/sass-embedded/dist/lib/src/vendor/dart-sass-embedded/dart-sass-embedded ENOENT

I would not know where to post this issue, but I would gladly help provided more follow up if you decide to post an issue with the sass team.

[claudia-romano]

Hi Alen, thank you for checking that. I have opened an issue on sass-embedded. It would be great if you could follow up in case they need some additional info to replicate the bug. Thanks!

[alenm]

Will do thank you

[alenm]

It looks like the issue is fixed. Bumping "sass-embedded": "^1.0.0-beta.3" to "sass-embedded": "^1.0.0-beta.4" within the package.json file should fix the error and make it work an apple m1 computer.

[claudia-romano]

Hi Alen, thanks for the help with that. I'm closing this issue now. Feel free to reopen it if anything else comes up. Thanks!