How to get next.js and vercel to work on M1 mac

Use next@canary

I'm building my blog website using next.js and vercel.
Today, I was working on an M1 MacBook Air and I got the following error when installing the dependency packages:

warning Error running install script for optional dependency: "/***/blog/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /***/blog/node_modules/sharp
Output:
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.0/libvips-8.10.0-darwin-arm64v8.tar.br
ERR! sharp Prebuilt libvips 8.10.0 binaries are not yet available for darwin-arm64v8
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@15.5.0 | darwin | arm64
gyp info find Python using Python version 3.9.1 found at \"/opt/homebrew/opt/python@3.9/bin/python3.9\"
gyp info spawn /opt/homebrew/opt/python@3.9/bin/python3.9
gyp info spawn args [
gyp info spawn args   '/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/***/blog/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/***/Library/Caches/node-gyp/15.5.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/***/Library/Caches/node-gyp/15.5.0',
gyp info spawn args   '-Dnode_gyp_dir=/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/***/Library/Caches/node-gyp/15.5.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/***/blog/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
  CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
  LIBTOOL-STATIC Release/nothing.a
warning: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/libtool: archive library: Release/nothing.a the table of contents is empty (no object file members in the library define global symbols)
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
../src/common.cc:24:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
         ^~~~~~~~~~~~
1 error generated.
make: *** [Release/obj.target/sharp/src/common.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
gyp ERR! System Darwin 20.3.0
gyp ERR! command \"/opt/homebrew/Cellar/node/15.5.0/bin/node\" \"/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /***/blog/node_modules/sharp

Well, it looks like the error came from sharp.
I found the related issue on GitHub:

• Can't compile under Apple Silicon M1 arm64 · Issue #2460 · lovell/sharp

And I checked nextjs and found this commit:

• feat(next/image): remove sharp for wasm variant (#22253) · vercel/next.js@99a4ea6

This pull request removes the native sharp dependency (which doesn't work on some Linux variants, nor M1 Mac) and replaces it with a wasm equivalent.

So, nextjs dropped the dependency on sharp as of v10.0.10-canary.6.
Installing next@canary solved it.

Use node@15.8.0

Next, I ran vercel dev and got this error:

#
# Fatal error in , line 0
# Check failed: allocator->SetPermissions(reinterpret_cast<void*>(region.begin()), region.size(), PageAllocator::kNoAccess).
#
#
#
#FailureMessage Object: 0x173e61c98
 1: 0x100eaf8a8 node::NodePlatform::GetStackTracePrinter()::$_3::__invoke() [/opt/homebrew/bin/node]
 2: 0x1018317d4 V8_Fatal(char const*, ...) [/opt/homebrew/bin/node]
 3: 0x10141c6bc v8::internal::wasm::WasmCodeAllocator::GetNumCodeSpaces() const [/opt/homebrew/bin/node]
 4: 0x10141c55c v8::internal::wasm::WasmCodeAllocator::FreeCode(v8::internal::Vector<v8::internal::wasm::WasmCode* const>) [/opt/homebrew/bin/node]
 5: 0x10141f3ac v8::internal::wasm::NativeModule::FreeCode(v8::internal::Vector<v8::internal::wasm::WasmCode* const>) [/opt/homebrew/bin/node]
 6: 0x10142cf30 v8::internal::wasm::WasmEngine::FreeDeadCodeLocked(std::__1::unordered_map<v8::internal::wasm::NativeModule*, std::__1::vector<v8::internal::wasm::WasmCode*, std::__1::allocator<v8::internal::wasm::WasmCode*> >, std::__1::hash<v8::internal::wasm::NativeModule*>, std::__1::equal_to<v8::internal::wasm::NativeModule*>, std::__1::allocator<std::__1::pair<v8::internal::wasm::NativeModule* const, std::__1::vector<v8::internal::wasm::WasmCode*, std::__1::allocator<v8::internal::wasm::WasmCode*> > > > > const&) [/opt/homebrew/bin/node]
 7: 0x10142af50 v8::internal::wasm::WasmEngine::PotentiallyFinishCurrentGC() [/opt/homebrew/bin/node]
 8: 0x10142c18c v8::internal::wasm::WasmEngine::ReportLiveCodeForGC(v8::internal::Isolate*, v8::internal::Vector<v8::internal::wasm::WasmCode*>) [/opt/homebrew/bin/node]
 9: 0x10142e8ac v8::internal::wasm::(anonymous namespace)::WasmGCForegroundTask::RunInternal() [/opt/homebrew/bin/node]
10: 0x100eae364 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task> >) [/opt/homebrew/bin/node]
11: 0x100ead458 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/opt/homebrew/bin/node]
12: 0x101521508 uv__async_io [/opt/homebrew/bin/node]
13: 0x10153107c uv__io_poll [/opt/homebrew/bin/node]
14: 0x101521928 uv_run [/opt/homebrew/bin/node]
15: 0x100dbea88 node::SpinEventLoop(node::Environment*) [/opt/homebrew/bin/node]
16: 0x100edafd4 node::worker::Worker::Run() [/opt/homebrew/bin/node]
17: 0x100edda18 node::worker::Worker::StartThread(v8::FunctionCallbackInfo<v8::Value> const&)::$_3::__invoke(void*) [/opt/homebrew/bin/node]
18: 0x18864606c _pthread_start [/usr/lib/system/libsystem_pthread.dylib]
19: 0x188640da0 thread_start [/usr/lib/system/libsystem_pthread.dylib]
Error! Failed to complete request to /_next/image?url=%2Fimages%2Ffootprint.png&w=48&q=75: Error: socket hang up

So, there is something wrong with v8.
Found the issue related to the error:

• macOS 11.2: Fatal error Check failed: allocator->SetPermissions · Issue #37061 · nodejs/node

I was on v15.5.0 and it looks like v15.8.0 solved it.
Installing the latest nodejs solved it.

Hope that helps!

Comments

[Alex Bass]

Thanks for posting @craftzdog ! This fixed it for me. This is now no longer an issue by upgrading to next@10.2.0. I found this post because I was running v10 - you only need to upgrade to the latest version now, no canary release :)