CodyHouse framework on an Apple M1 computer npm set up
alenm opened this issue · 7 comments
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
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
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!
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.
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!
Will do thank you
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.
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!