M1 Mac specific error

In trying to transfer and restart development on a Rails 6.1.3 app and get it up-to-date, I got an error on an M1 Mac about node-sass not supporting my current environment (the M1 Mac’s ARM 64 architecture).

ERROR in ./app/assets/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/assets/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)

Just yarn install?

Unsurprisingly, this didn’t work, but my first instinct was a yarn install: and a few errors presumably unique to the M1 Mac (or maybe Big Sur’s Xcode environment) showed up:

../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::basic_string &' to prevent copying
for (const auto denominator : denominators)
     ^~~~~~~~~~~~~~~~~~~~~~

.
.

/Users/tpowell/.node-gyp/16.10.0/include/node/v8-internal.h:489:38: error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?
            !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
                                ~~~~~^~~~~~~~~~~
.
.
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/tpowell/projects/blog-post-debug/self-journal/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "/opt/homebrew/Cellar/node/16.10.0_1/bin/node" "/Users/tpowell/projects/blog-post-debug/self-journal/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/tpowell/projects/blog-post-debug/self-journal/node_modules/node-sass
gyp ERR! node -v v16.10.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1

Upgrade to node-sass compatible with the M1 Mac via @rails/webpacker

The const auto denominator error led me to this StackOverflow answer. The last time I had downstream dependency issues, the cleanest resolution was upgrading the @rails/webpacker using outdated dependencies in package.json. The current version is 5.4.3:

9c9
<     "@rails/webpacker": "5.2.1",
---
>     "@rails/webpacker": "5.4.3",

After this a yarn install should work fine. (Your need to delete node_modules may vary). Now the assets are compiling and page rendering properly: