Help! Caught in command line hell trying to get Foundation working again!

[adventdesignllc]

I love Foundation and have been using it exclusively for years. What I don't love, and frankly get completely lost in is all the command line installations and updates required to keep it running.

6 months ago I did a fresh install on a new MacBook M1. After much beating my head against the wall, I managed to find the right combo of installs and versions to get it working again.

But now, alas, I keep running into errors with "foundation watch" and so I tried a clean install of many of the dependencies, but I'm in a looping hell of errors in the command line. I google the error, find some supposed answer and run it. Which gets me a different error and so and and so on...

As said, I'm on a Mac M1 running Big Sur 11.6.1.

Running the command line "foundation new" I get the following:

Downloading the project template...
Done downloading!

Installing dependencies...

undefined

There were some problems during the installation.

✓ New project folder created.
✗ Node modules not installed. Try running yarn install manually.

Once you've resolved the above issues, run foundation watch while inside the Test789 folder.

Running "foundation watch" I get the following:

/usr/local/lib/node_modules/foundation-cli/lib/commands/watch.js:26
npm.commands.start.apply(this, []);
^

TypeError: npm.commands.start.apply is not a function
at /usr/local/lib/node_modules/foundation-cli/lib/commands/watch.js:26:24

I've confirmed I have node installed so I don't understand why it's saying I don't.

What version of node should I be running?

What I'd really love is to hire someone out there to help me through this mess in a screen share, as I've been running various 'fixes' for a couple hours which seem to change the errors, but I still get the errors.

[kiwi3685]

I'm like you - hate CLI, love foundation!

I take the very easiest way - from https://get.foundation/sites/docs/installation.html I download the "starter template". (Button marked "'Download Foundation", above the section on CDN Links. There is nothing else required. Replace with same for each update.

Or, from github grab the 'dist' folder. It has the same files - just css and js.

[adventdesignllc]

Except then you lose the SASS compiler function and the ability to customize in the same efficient manner, as well as the single line comment out of various functions not required in the project.

[kiwi3685]

Basically yes, although I'm not that bothered about functions not required in my project. They don't take up significant resource.
I do have a project-specific sass file based on the default foundation one, and compile that independently through the software "Prepros", as I do with js files outside of foundation.
I don't use CLI or Node etc for anything. Admittedly 'old-school, but it works for me.
You could though go further and skip sass as well. Just use css.

[nitrokevin]

Have you tried using node v11 ?
nvm use v11

[nitrokevin]

An alternative option is to do a get info on the terminal app and tick “open with Rosetta” then try the npm install command again

[adventdesignllc]

Well, unfortunately after running your suggestions, getting the exact same error.

[nitrokevin]

With node 12?

[adventdesignllc]

No when I'm trying to install Node 10.

[adventdesignllc]

The last error was thorn trying to install node 10.

[adventdesignllc]

Still struggling. Tried fresh installs of 11 12 and 14 and then install foundation, still getting that same syntax error. Only though GitHub foundation page shows the latest release being 6.7.4, but running "npm --v foundation-cli" I'm showing 6.14.15 which I find no documentation for.

[DanielRuf]

That is the npm version, npm -v and so on lists the npm version. And Foundation Sites version !== foundation-cli version.

These links point to the latest available releases on npmjs:
https://unpkg.com/foundation-cli
https://unpkg.com/foundation-sites

[adventdesignllc]

What would I do with those links? I'm not following.

[DanielRuf]

It was just an explanation that the displayed version 6.14.x was from npm itself, not foundation or foundation-cli.

[adventdesignllc]

A little more information... I just realized the problem probably started a few weeks back when I did a reinstallation of the MacOS.

[adventdesignllc]

Still getting that same syntax error noted above no matter what node I install. I need my Foundation back! Any help anyone could provide would be greatly appreciated.

[DanielRuf]

Maybe Daniel is in a better position to say if using sass instead of node-sass is a good idea. And if so would you just need to remove node-sass from package.json and add sass?

dart-sass or sass (same) is planned afaik. I'm not involved as maintainer and contributor anymore so I can not say more about the current plans behind the scenes.

But in frontend projects at work we switched from ruby-sass to node-sass to sass without big problems. In most projects like Foundation you will have to use the migrator of sass to convert the code to the new syntax (use instead of import for example) as there are quite some breaking changes.

https://www.sass-lang.com/documentation/cli/migrator

[rickcurran]

@DanielRuf Any pointers on being able to migrate from the Gulp-sass that the Foundation CLI uses to Sass or Dart-sass? I'm in the same boat that I've just got a new M1 MacBook Pro and I'm unable to get the tools running at all.

[DanielRuf]

@rickcurran probably with the Sass Migrator. Has to be applied to the foundation-sites scss files and maybe your own scss files too.

I'm not involved in this project anymore. But with the migrated scss files everything should be fine. gulp-sass supports sass, but you will have to remove node-sass then.

[rickcurran]

@DanielRuf The biggest issue I'm having initially is being able to get an alternative to gulp-sass installed in order to get the project running. I'm hitting all of the same issues as @adventdesignllc has encountered above. I've tried to switch to gulp-dart-sass but it ends up causing issues with syntax in the gulpfile. I've just not a clear enough idea yet of what needs to change. It seems like there's a way to switch the underlying compiler for gulp-sass to use the dart compiler but again no joy getting that to work. I'll do a bit of further digging and see what I can come up with.

[DanielRuf]

The current version of gulp-sass supports sass, see the readme at https://npmjs.com/gulp-sass

Try npm uninstall node-sass and then just npm i sass in the foundation-sites project.

[rickcurran]

@DanielRuf Thanks, I tried that but I get errors trying to run npm uninstall node-sass, I think there's just a load of issues going on here. I'll take a further look into the Gulp-sass read me, although part of the issue is I'm not able to instal gulp-sass in the first place.

[joeworkman]

I am trying to follow where things currently are with this thread. I currently have node v14.18.1 installed on my Intel Mac running MacOS 12.0.1. I personally use homebrew to install node.

Let's get foundation-cli out of the equation for now. I am not sure how much longer that will even be supported. It basically can be replaced with a 5 line shell script. So let's just stick with running the following commands from terminal.

Assuming that you have node 14 and yarn installed...

If you want the Basic Sites Template

git clone https://github.com/foundation/foundation-sites-template.git 
cd foundation-sites-template
rm -rf .git
yarn install

If you want the Panini based Site Builder Template

git clone https://github.com/foundation/foundation-zurb-template.git
cd foundation-zurb-template
rm -rf .git
yarn install

Let me know which you have tried and what errors you are getting now. I have access to an M1 Mac. However, it's my wife's Mac and therefore has zero development tools installed.

[DanielRuf]

"primordials is not defined"

Search for that and you will find many issues and some stackoverflow posts where I mention that this is due to Node being too new.

[adventdesignllc]

But @rickcurran seems to be running fine with Node 14. I'm trying to figure out why he's getting different results.

[DanielRuf]

Probably because he uses a different gulp / gulp-sass version as the primordials error is thrown by vinyl-fs (gulp) => graceful-fs => natives.

[adventdesignllc]

How do I know what version of gulp/gulp-sass he is using vs mine?

[rickcurran]

I've just compared the two projects I've been testing, one is fresh so has a new package.json and the other is older. Both of these are working for me but the package.json files are quite different, the newer one has "node-sass": "^6.0.1", under "devDependencies" and also has "gulp-postcss": "^9.0.1" ( the gulpfile.babel.js also has quite a few differences). That may not be that relevant but interesting as they do both work on my set up even though they're slightly different.

[rickcurran]

@adventdesignllc Here's the versions of what I'm running, note that I'm running on the latest Mac OS Monterey 12.01:

Node: v14.18.2
NPM: 6.4.15
Yarn: 1.22.15

Did you try following the steps for a fresh site using @joeworkman's original post? I followed those and it is working, and then I was able to try on one of my existing sites and that worked too. Other than that I'm not too clear on what else could be different. Are you definitely using Node 14? It looks like it as it's mentioned amongst the errors you posted but you can check using nvm current.

[adventdesignllc]

@joeworkman I have a newer version of NPM apparently, and he's running Monterey. Rosetta is installed. I'm not so sure about Xcode. Should I try to downgrade NPM? And I guess I can try upgrading the OS, though I hate doing a new OS upgrade too early in the cycle.

[joeworkman]

Are you using yarn or npm?

[adventdesignllc]

LOL, I had no idea that was an either/or thing. NPM I think, though at some points in all the trial and error I had installed Yarn too.

[rickcurran]

@adventdesignllc Ack, sorry, it's hard to see what the difference would be between our setups! They definitely should be working fast even through Rosetta. I was having similar issues with the "OS X Unsupported architecture (arm64)" errors but when I followed @joeworkman's commands for the "Panini based Site Builder Template" I managed to get it working. Just to confirm all my versions here's what I have:

NPM: 6.14.15
NVM: 0.39.0
Node: v14.18.2
Yarn: 1.22.15
Xcode 13.1 (as well as the Xcode Command line tools)
MacOS 12.01

I'm happy to share the gulpfile.babel.js and package.json from the two projects that I've got running.

I did however have a few issues getting another existing project running, so here's the steps I took to resolve that, perhaps that will help. For my existing project I removed the existing node_modules folder and also the existing package-lock.json file as Yarn complains about that if it's there. When I first tried running yarn install on this site it ran and then had some errors, somehow my current node version had switched to v17 (not sure how and I recall you had a similar issue with the node version changing), I used nvm to switch to node v14 by running nvm use 14 and then ran yarn install again and this time it was successful.

There were quite a few warnings about various modules but it did work. I then could run either npm start or npm run-script build and it worked correctly. Build times for this project were roughly twice as fast as they were on my old machine (e.g Finished 'build' after 5.12s Vs Finished 'build' after 9.16s).

[adventdesignllc]

@rickcurran thanks for all that info. I'm going to try updating the OS and confirming Xcode then running everything again, just haven't had a chance yet. I'll report back.

[adventdesignllc]

Well, I left well enough alone and limped along with the really slow processing, but now I need to do some major fresh builds so I took another whack at getting this thing working properly, and I'm finally able to say its working perfectly! Processing in 800 ms now instead of 18 s!

I went through updating everything one by one. I don't believe I actually had the Xcode command line tools installed, which must have been part of the problem. I upgraded from MacOS 11 to 12 as well, which might have played a roll.

Here's what I have:
NPM: 8.1.4
NVM: 0.38.0
Node: 14.18.1
Yarn: 1.22.17
Xcode: 13.2.1
MacOS: 12.1

I'm using:

git clone https://github.com/foundation/foundation-sites-template.git cd foundation-sites-template rm -rf .git yarn install

to create a new project and

npm start

Compiling in well under 1s.

[rickcurran]

@adventdesignllc I'm glad you managed to sort it out, it's great to have the fast compile times!