Next failed to load SWC binary - next.js

Question

When trying to run the command using nextjs npm run dev shows error - failed to load SWC binary see more info here: https://nextjs.org/docs/messages/failed-loading-swc.
I've tried uninstalling node and reinstalling it again with version 16.13 but without success, on the vercel page, but unsuccessful so far. Any tips?
Also, I noticed it's a current issue on NextJS discussion page and it has to do with the new Rust-base compiler which is faster than Babel.

Answer 1

Delete the package-lock.json file and the node_modules directory in your project and then run npm install on your terminal.

Answer 2

This worked as suggeted by nextJS docs but it takes away Rust compiler and all its benefits... Here is what I did for those who eventually get stuck...
Step 1. add this line or edit next.json.js
{
swcMinify: false // it should be false by default
}
Step 2. add a ".babelrc" file to project root dir
Step 3. add this snippet to the new file ".babelrc"
{
"presets": ["next/babel"]
}
Step 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
hope this helps

Answer 3

If you use Docker, just add RUN npm install -D #swc/cli #swc/core to Dockerfile.

Answer 4

I have the same issue, don't know why, I am using
node v18.4.0
next#12.1.6
to fix this issue
just visit this website
https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170
install this

Answer 5

I had the same issue on Windows 11. I upgraded NodeJS to 17.0.1. After that, everything works now.

Answer 6

make .babelrc in root directory. And add the following code.
{ "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }

Answer 7

This error occurs because next js uses a Rust-based compiler to compile JavaScript which is much faster than babel but this is not compatible with all system architecture, in other to fix this you have to disable this compiler and use the native babel compiler. This is done by creating a .babelrc file in your root directory and adding this code below to the file;
{"presets": ["next/babel"]}
you can check out this link for more details: SWC Failed to Load - NEXTJS DOCS

Answer 8

If you are running using Docker, I had to use node:14-buster-slim as my base image to make it work. I got the idea for my working solution from https://github.com/vercel/next.js/discussions/30468#discussioncomment-1598941.
My multi-staged Dockerfile looks like this:
############### Base Image ###############
FROM node:14-buster-slim AS base
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
############### Build Image ###############
FROM base AS build
ARG app_env=production
ARG app_port=3000
WORKDIR /build
COPY --from=base /app ./
ENV NODE_ENV=${app_env}
ENV PORT=${app_port}
EXPOSE ${app_port}
RUN npm run build
############### Deploy Image ###############
FROM node:14.18.1-alpine AS production
ARG app_env=production
ENV NODE_ENV=${app_env}
WORKDIR /app
COPY --from=build /build/package*.json ./
COPY --from=build /build/.next ./.next
COPY --from=build /build/public ./public
RUN npm install next
EXPOSE 3000
CMD npm run start
If you want to use docker-compose to run your services, the docker-compose.yaml file for running the next dev will look something like this:
version: "3"
services:
web-server:
env_file:
- ./.env
build:
context: .
dockerfile: Dockerfile
target: base
command: npm run dev
container_name: web-server
restart: always
volumes:
- ./:/app
- /app/node_modules
ports:
- "${NODEJS_PORT}:3000"

Answer 9

In your NextJS Project you have this file , named .eslintrc.json, In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}

Answer 10

The best way to fixed this problem on Windows is install "Microsoft Visual C++ Redistributable"
The error is occurring because Next.js is using Rust-based compiler SWC to compile JavaScript/TypeScript now and for this SWC requires a binary be downloaded that is compatible specific to your system.
To Solve this problem :
Just go to Microsoft Visual C++ Redistributable to download
latest supported Microsoft Visual C++ Redistributable.
Or, you can simply download from here (please check your version first)
Permalink for latest supported x64 version
The X64 Redistributable package contains both ARM64 and X64 binaries. This package makes it easy to install required Visual C++ ARM64 binaries when the X64 Redistributable is installed on an ARM64 device.
Permalink for latest supported x86 version
Permalink for latest supported ARM64 version

Answer 11

Just run 'npm i' or 'yarn' and then restart the server.

Answer 12

Remove node_modules directory and package-lock.json
Run npm i to install the dependencies
If you are on MAC OS, you can directly run below command in terminal
rm -rf node_modules && rm package-lock.json && npm i

Answer 13

In my case issue was with NextJs version 12.2. I have downgraded it to 12.1.6 and my issue is fixed.

Answer 14

I'm a beginner with next.js and I had the same error. After searching I got a solution to add .babelrc. but using that couldn't get the features of SWC.
Today I got a real solution, using this example project command. When we create our new project, then swc will work as well as no error will be there.
command- npx create-next-app 'your_project_name' --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Let me know if you face any further issues.

Answer 15

Just Download Redistributable C++ 2015

Answer 16

If you read the docs it says you need a distributable file which can be downloaded at https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist?view=msvc-

Answer 17

Best solution for this problem is
Delete your package-lock.json.
Downgrade your next.js version "12.1.6" from current version.
run npm i --force command.
now run npm run dev command and it will work.

Answer 18

This is Happen because of you have uninstalled npm modules or yarn in your project
Just Run this command / install node packages you will get your back