M1 mac에서 next.js와 vercel이 작동하도록 하는 방법

next@canary 사용

next.js와 vercel을 사용하여 블로그 웹사이트를 만들고 있습니다.
오늘 저는 M1 MacBook Air에서 작업 중이었고 종속성 패키지를 설치할 때 다음 오류가 발생했습니다.

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 [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 3.9.1 found at \"/opt/homebrew/opt/[email protected]/bin/python3.9\"
gyp info spawn /opt/homebrew/opt/[email protected]/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

sharp 에서 오류가 발생한 것 같습니다.
GitHub에서 관련 문제를 찾았습니다.

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

그리고 nextjs를 확인하고이 커밋을 찾았습니다.

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.

따라서 nextjs는 sharp 현재 v10.0.10-canary.6 에 대한 종속성을 삭제했습니다.
설치next@canary하면 해결됩니다.

[email protected] 사용

다음으로 vercel dev를 실행했는데 다음 오류가 발생했습니다.

#
# 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

따라서 v8에 문제가 있습니다.
오류와 관련된 문제를 찾았습니다.

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

나는 v15.5.0에 있었고 v15.8.0 그것을 해결 한 것처럼 보입니다.
최신 nodejs를 설치하면 해결되었습니다.

도움이 되기를 바랍니다!