Hello,
I’m trying to get an old Sage project running locally on my Mac, so that I can update some of the styles on the site. I’m having some issues getting it to work. Typically, when I see a package.json file, I can just run npm i or in the case of my preferred workflow pnpm i and then run pnpm dev. But there is no dev npm script in the package.json file. There is only build, start, and some others. When running either of those commands, I get issues related to node-sass. I noticed it was requiring node >= 8. I was currently running v18. I switched to 8 to no avail.
I looked at the documentation, but that wasn’t too helpful considering I’m trying to run Sage v9. Can someone walk me through how to get this project running. I’m using a M1 MacBook Air if that matters.
Also, in addition to sass, I believe this project is using bootstrap.
Any help would be very appreciated. Thank you.
Can you share some of the errors you received when running the correct commands, start or build?
Yep. So the first error I got when attempting to install node modules was actually much longer than what you see below (basically just more of the same):
2 warnings generated.
│ rm -f Release/sass.a && ./gyp-mac-tool filter-libtool libtool -static -o Release/sass.a Re
│ env: python: No such file or directory
│ make: *** [Release/sass.a] Error 127
│ gyp ERR! build error
│ gyp ERR! stack Error: `make` failed with exit code: 2
│ gyp ERR! stack at ChildProcess.onExit (/Users/jamestrenda/Local Sites/barkhouse/app/publi
│ gyp ERR! stack at ChildProcess.emit (node:events:513:28)
│ gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12
│ gyp ERR! System Darwin 22.4.0
│ gyp ERR! command "/Users/jamestrenda/.nvm/versions/node/v16.20.1/bin/node" "/Users/jamestrend
│ gyp ERR! cwd /Users/jamestrenda/Local Sites/barkhouse/app/public/wp-content/themes/barkhouse-
│ gyp ERR! node -v v16.20.1
│ gyp ERR! node-gyp -v v7.1.2
│ gyp ERR! not ok
│ Build failed with error code: 1
└─ Failed in 1m 7.9s at /Users/jamestrenda/Local Sites/barkhouse/app/public/wp-content/themes/barkhouse-shop/node_modules/.pnpm/node-sass@6.0.1/node_modules/node-sass
node_modules/.pnpm/yarn@1.22.17/node_modules/yarn: Running preinstall script, done in 135ms
ELIFECYCLE Command failed with exit code 1.
Then I attempted to run the start and build commands and they both gave me the following error:
> sage@9.0.9 start /Users/jamestrenda/Local Sites/barkhouse/app/public/wp-content/themes/barkhouse-shop
> webpack --hide-modules --watch --config resources/assets/build/webpack.config.js
sh: webpack: command not found
ELIFECYCLE Command failed.
Can’t find the command webpack? Okay, so do I have to install that separately? I’m used to building Next.js and Remix apps that take care of all this bundling stuff for me.
After switching to node 8 (because of what I saw in package.json and seeing that this project was last touched in 2019), the error message became:
/usr/local/lib/node_modules/corepack/dist/corepack.js:3856
...options
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/usr/local/lib/node_modules/corepack/dist/pnpm.js:2:1)
jamestrenda@Marys-Air barkhouse-shop % pnpm start
/usr/local/lib/node_modules/corepack/dist/corepack.js:3856
...options
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/usr/local/lib/node_modules/corepack/dist/pnpm.js:2:1)
jamestrenda@Marys-Air barkhouse-shop % pnpm build
/usr/local/lib/node_modules/corepack/dist/corepack.js:3856
...options
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/usr/local/lib/node_modules/corepack/dist/pnpm.js:2:1)
Please let me know what else you need to see. I can create a public Github repo if necessary. Thanks.
One thing I just thought of is that I’m using a different computer than the last time I did some Wordpress development, so I don’t think I have Composer installed. I don’t think that’s going to solve my issue with modifying and compiling the stylesheets, but if I need to update some of the PHP files, I’m guessing I need Composer?
Another thing perhaps worth noting is that I’m trying to use Local with our WPEngine account to push/pull changes. I’ve done this in the past and used gulp for compiling scripts and styles.
I’ve managed to get the site pulled down from WPEngine and running successfully with the Local app. The site loads up at barkhouse.local and I can log in to the Wordpress backend. But as far as editing the .scss files and getting those to re-compile, I’m at a loss right now. The README files talks about having PHP and Composer. I didn’t have PHP, so I just got that installed. I installed Composer after that. Restarted my terminal. I can confirm I have PHP and Composer installed now. But it still can’t find the webpack command.
Here’s the link to the repo on GitHub: GitHub - eldiedesign/barkhouse
I hope there’s nothing in there that should be private 
When I pulled that theme and ran yarn install and yarn build (on Node 16.18.1) it seemed to build fine (as far as node-sass goes) but ran into syntax issues.
Module build failed: ModuleBuildError: Module build failed:
margin-top: math.div($hamburger-layer-height, -2);
^
Invalid CSS after "...argin-top: math": expected expression (e.g. 1px, bold), was ".div($hamburger-lay"
in /Users/ehlovader/src/test/barkhouse/node_modules/hamburgers/_sass/hamburgers/_base.scss (line 60, column 19)
at /Users/ehlovader/src/test/barkhouse/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/ehlovader/src/test/barkhouse/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/ehlovader/src/test/barkhouse/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/ehlovader/src/test/barkhouse/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (/Users/ehlovader/src/test/barkhouse/node_modules/sass-loader/lib/loader.js:55:13)
at Object.done [as callback] (/Users/ehlovader/src/test/barkhouse/node_modules/neo-async/async.js:8069:18)
at options.error (/Users/ehlovader/src/test/barkhouse/node_modules/node-sass/lib/index.js:293:32)
From my memory some Sage 9 sites we used to have where I worked had node-sass errors but that was in compiling it for specific node versions. What I remember was using Node 12 and node 14. So going back all the way to 8 may not be the right answer. Using NVM you might try cycling through versions until you reach success then commit that to a .nvmrc file for future you.
I also don’t see a package lock file (forget when they started creating that) you’d want to keep that so you have a record of what installed at what version when it works.
Update: I followed up on the math.div error and it appears to have come from the hamburgers library. Build Error with New Version · Issue #116 · jonsuh/hamburgers · GitHub
There was a change in Sage 9.0.10 it seems where it switched from node-sass to dart sass… upgrading that might not be as simple as just pinning the hamburger down to v 1.1.3 as noted in that comment.
I did update that in the package.json and it compiled fine.
"hamburgers": "1.1.3",
5 Likes
If using Local WP, you don’t need to install PHP or composer. Be sure to run your composer commands through Local’s shell (right-click on the site, and choose “Open Site Shell”). Then cd to the theme directory and composer install). This ensures your dependencies are installed against the PHP version that Local is running.
You may also be interested in updating your dependencies for PHP 8.x compatibilility: Sage 9 + PHP 8.0
3 Likes
Thanks for your time on this! Perhaps it was an pnpm and node issue. I installed node 14 and tried running pnpm i again, but my version of pnpm requires at least node 16. So that didn’t work. Then I tried the standard npm install and that installed without any node-sass errors, but did give me the syntax error related to hamburgers. I changed that version to 1.1.3 like you said to do, and then I ran both the build and start scripts and voila, both worked, no webpack errors. And I can confirm that changes to a sass stylesheet end up in the compiled stylesheet. So that’s good.
Now…to get it working with Local. That’s the next step.
1 Like
Thank you to you as well for your time and help. I really appreciate it!
1 Like
Okay, so it’s been a couple of weeks since I asked for help and after you answered me, I was able to get it all to compile (so I thought?) I hadn’t had to work on it again since, so I’m not sure what happened between now and then, but now for some reason, my stylesheet and scripts files don’t seem to be compiling.
Any idea why or how to fix this?
ERROR Failed to compile with 3 errors 11:03:12 AM
These relative modules were not found:
* ./scripts/main.js in multi ./scripts/main.js ./styles/main.scss
* ./scripts/customizer.js in multi ./scripts/customizer.js
* ./styles/main.scss in multi ./scripts/main.js ./styles/main.scss
What’s odd to me is that a ‘dist’ directory does get created with a ‘scripts’ subdirectory and inside there is a main.js, main.js.map, customizer.js, and customizer.js.map, but if I put a dummy variable in the main.js file, it is not getting added to the compiled script.
So yarn build does not work, but npm run build does seem to build all the assets, but it doesn’t seem to generate an assets.json file or add the hash on the end of the compiled stylesheet. So when I push the compiled stylesheet to the server, it doesn’t get loaded. It still references the old stylesheet at /dist/styles/main_95ecdadd.css and I’m not sure how to cache bust it.
that is really odd. yarn build and npm run build should be doing the same thing.
my first thought was dependency or node version changes since the point that it was working.