Failing on ARM architecture (Apple's M1) because of node-sass / libsass

[medialpl]

Expected behaviour

Local instance of the Cornerstone template should be displayed after opening http://localhost:3000

Actual behaviour

Stencil CLI is starting properly but after opening http://localhost:3000 it’s failing immediately with the following error:

/usr/bin/node: symbol lookup error: 
/usr/lib/node_modules/
@bigcommerce/stencil-cli/node_modules/
@bigcommerce/stencil-styles/node_modules/
@bigcommerce/node-sass/vendor/linux-arm64-72/binding.node
:undefined symbol libsass version

Steps to reproduce behaviour

Use the following Dockerfile in order to create a container with the Stencil CLI, then run it.

FROM ubuntu:18.04
SHELL ["/bin/bash", "--login", "-c"]
RUN apt-get update && apt-get install -y python3 libsass-dev g++ build-essential git curl
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash
RUN apt-get install -y nodejs
WORKDIR /theme
RUN npm -g config set user root && npm install -g @bigcommerce/stencil-cli
EXPOSE 3000

Build: docker build -t node_stencil .

Place the Cornerstone in $(pwd)/themes/cornerstone on your host machine.

Run: docker run -it --name my_node_stencil -v $(pwd)/themes/cornerstone:/theme -p3000:3000 node_stencil bash

And just stencil start inside the container.

Environment

Docker version 20.10.12, build e91ed57

Stencil-cli version stencil —version: 3.10.0

Node version node -v: v12.22.10

NPM version npm -v: 6.14.16

OS (host): macOS Monterey 12.0.1

OS (container): Ubuntu 18.04 (arm)

Hardware: Apple M1

Positive cases

Issue is not present, when running the same container, on Linux x86 machines.

Fix?

Guess is that @bigcommerce/node-sass does not have arm64 build.

[umarmw]

Same issue on my M1.

../src/sass_context_wrapper.h:8:10: fatal error: 'sass/context.h' file not found
#include <sass/context.h>
         ^~~~~~~~~~~~~~~~
1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/umarmw/.nvm/versions/node/v12.22.7/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:314:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 21.2.0
gyp ERR! command "/Users/umarmw/.nvm/versions/node/v12.22.7/bin/node" "/Users/umarmw/.nvm/versions/node/v12.22.7/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/umarmw/.nvm/versions/node/v12.22.7/lib/node_modules/@bigcommerce/stencil-cli/node_modules/@bigcommerce/stencil-styles/node_modules/@bigcommerce/node-sass
gyp ERR! node -v v12.22.7
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bigcommerce/node-sass@3.5.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1

[jairo-bc]

@medialpl Did you try to run in Rosetta mode? https://developer.bigcommerce.com/stencil-docs/installing-stencil-cli/installing-stencil There is a section "Installing on Mac with Apple silicon"

[medialpl]

Did you try to run in Rosetta mode? There is a section "Installing on Mac with Apple silicon"

@jairo-bc That manual is about installing the CLI directly on the host system and not in a Docker container, but anyway, it's possible to build Docker image mentioned in my initial post on x86 and run it on arm processor. Docker will use emulation mode automatically and Stencil CLI will work.

The case is that emulation results in performance drop for about 20%. It would be great to have native arm version of the Stencil CLI.

[medialpl]

@umarmw Did you used my Dockerfile? The error is suggesting me that in your case system is missing libsass-dev. Of course image will still won't work for you anyway, but you should get a little bit further with the installation process.

[altugyavuz7]

Can you try with Node version 12.0.0? This was the only Node version I was able to run when I got the same error.

[caglaroptimum7]

@medialpl Did you try to run in Rosetta mode? https://developer.bigcommerce.com/stencil-docs/installing-stencil-cli/installing-stencil There is a section "Installing on Mac with Apple silicon"

this is not actually working. I use zsh fish shell also. Both of them are not working properly.

[gorodnov]

I recently had similar issue on Node 14.19.1. I was able to resolve it running LIBSASS_EXT="no" npm install

Here is where I found the solution https://github.com/sass/node-sass/issues/2010