How to fix failed to load SWC binary NextJS

I was setting up Tailwind CSS with Next.js. While I was following the steps described on official docs, I encountered following error

Failed to load SWC binary for darwin/x64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

Although, the NextJS documentation tried to address this issue however the steps defined in above link are not clear

Below are the solutions that worked for me

Solution 1

1. Remove node_modules directory and package-lock.json
2. Run npm i to install the dependecncies

If you are on MAC OS, you can directly run below command in terminal

rm -rf node_modules && rm package-lock.json && npm i

Solution 2

Install the canary version of NextJS npm install next@canary

Solution 3

This worked as suggeted by nextJS docs but it takes away Rust compiler and all its benefits. Here is what I did

1. add this line or edit next.json.js

{
  swcMinify: false // it should be false by default 
}

2. add a .babelrc file to project root dir

3. add this snippet to the new file .babelrc

{
  "presets": ["next/babel"]
}

4, you need to run this command as steps 1-3 will remove SWC failed to load error but you will notice another error when you run the build command. So run this too

npm install next@canary

For anyone working with Docker, you might discussion on github helpful.

I hope this helps in fixing the issue Failed to load SWC binary

👉 If you found this post useful, bookmark this page (⌘ + d / ctrl + d) for your future reference 😃