DEV Community

loading...

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

craftzdog profile image Takuya Matsuyama ・5 min read

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
Enter fullscreen mode Exit fullscreen mode

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

And I checked nextjs and found this commit:

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
Enter fullscreen mode Exit fullscreen mode

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

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

Hope that helps!

Discussion (1)

pic
Editor guide
Collapse
alexbassy profile image
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 :)