How can I run natively 'Big Commerce Stencil CLI' on Apple Silicon M1 Chip

#bigcommerce #stencil #applesilicon #m1chip

I am a front-end engineer who mostly works on a Bigcommerce platform. Bigcommerce uses a handlebar with the 'stencil command line interface' and it requires 'node version manager' (nvm).

I switched my Intel Macbook Pro with M1 Chip Macbook Pro then I couldn't realize this migration will be a little bit ticky.

I installed homebrew then node and nvm packages then I followed the steps on bigcommerce developer website.

However, almost every project gives different errors but all of them are related to the 'node' version. I've gotten few-hour research on Google but these were not about BigCommerce 'stencil-cli',

Jump to 'TL;DR'
Here is the perfect version of the NVM for your delicious Stencil Templates.

# For ARM based macs // for bash
arch -x86_64 /bin/zsh

# For ARM based macs // for Fish Shell
arch -x86_64 /usr/local/bin/fish

brew install node
brew install nvm

# which is LTS for v12
nvm install 12.13.0
nvm alias default 12.13.0
npm install -g @bigcommerce/stencil-cli

Then start your project with

stencil start -o

Please check out our website to get more information about BigCommerce Development and Marketing.

Thanks for reading, Happy hacking 🧡

Top comments (2)

T-McVee • Nov 15 '21

Hey Caglar, thanks for the post. I tried walking through these steps on my m1 mac however, I'm still getting an errror when I run stencil start..

Error during css compilation by the primary engine:
Error: Top-level selectors may not contain the parent selector "&".
   ╷
20 │ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   │ ^^^^^^^^^^^^^^^
   ╵
  dh-custom/dh-global.scss 20:1  @import
  dh-custom/dh-theme.scss 8:9    @import
  stdin 94:9                     root stylesheet
Will retry with a fallback engine

Do you have any thoughts on what might be causing this? The same project opens fine on my older macbooks.

Caglar • Jan 12 '22

Hi T-McVee, sorry for late response.
You should try this:

*&::placeholder{}
and complile your project witk node-sass

DEV Community

How can I run natively 'Big Commerce Stencil CLI' on Apple Silicon M1 Chip

Top comments (2)

Read next

Supervised ML Types - Art of Possible

Handling nested roles in Keycloak

Avoiding Connection Pinning in Lambda and RDS Proxy with NestJS and Proxy Splitting

switch