Next failed to load SWC binary

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.

Dong

Answer 1

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

If you still have issues, you may refer the following link.

Nextjs Docs: https://nextjs.org/docs/messages/failed-loading-swc

Fasto

Did the trick. Sometimes you just need to unplug it and plug it back in ;) – Unpremeditated

it worked I was facing issue - Attempted to load @next/swc-darwin-arm64, but it was not installed – Majunga

Sometimes you also need to run npm cache clean --force before npm install, especially if you upgraded to higher version of Node.js recently. – Jacobba

This worked for me, forgot that the package-lock.json file had system-specific data in it, and when switching machines to a different architecture, it broke. Deleted, fixed! – Middleoftheroad

I love you man, it works – Inflammatory

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

Dong

This is last hope scenario and this certainly shouldn't be an accepted answer – Oireachtas

You might have a solution that works, but this solution was from the next js website... How is it the last resolution or why should it not be accepted? – Dong

How is this not the last resort? This is like literally cutting off your hand when it’s causing an issue. Above answer is the right solution. Please mark it as acceptable answer – Oireachtas

... well, for me just running npm install next@canary solved the problem. – Well

Indeed, npm install next@canary worked best – Earnest

adding to all of this, I can confirm by yarn add next@canary did the job, solved the problem. – Haemophiliac

Answer 3

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

Synod

Could you add more details? Why this work? – Mondragon

Answer 4

I have the same issue, don't know why, I am using node v18.4.0 [email protected]

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

Cocainize

Answer 5

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

Macrophysics

Answer 6

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"]
}

Callable

Answer 7

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

Necrolatry

Same issue with v16. I downgraded to v14.9 and all is working well again. – Bebe

Answer 8

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

Nestorius

Answer 9

make sure to download the compatible version of nodejs in your system. see how i downloaded the wrong version and created this problem for me. make sure to check your nodejs arch.

Belgium

Answer 10

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

Venable

Answer 11

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"

Boomerang

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

Gaiety

Answer 13

Solution for Attempted to load @next/swc-darwin-arm64, but it was not installed warning while using pnpm:

I deleted node_modules & pnpm-lock.yaml and added "@next/swc-darwin-arm64": "^13.3.0" as a dependency in package.json:

"dependencies": {
  "@next/swc-darwin-arm64": "^13.3.0",
  ...
}

Gablet

Answer 14

Step 1. add a ".babelrc" file to project root dir

Step 2. add this to the ".babelrc"

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

step 3:npm run dev

Cocteau

+1 for this - removing my yarn-lock and node_modules and then reinstalling didn't work for me whereas this did - thanks! – Rebirth

Answer 15

That happens usually when you install a node x86 in a x64 OS and viceversa.

Muzhik

Answer 16

I faced the same problem and after some research, I found a working solution. I think the problem has something to do with your system architecture and the nodejs you installed on your system. I have a 64-bit system, but I installed the 32-bit of the nodejs. (I am using Windows 10, Next js 14).

You can check your node architecture by running this command:

node -p "process.arch"

The point here is that your nodejs must match your system architecture.

Additional resources:

how to determine whether I have 64bit or 32 bit node executable installed?

https://github.com/vercel/next.js/discussions/57951

I hope this is helpful.

Nonunionism

Answer 17

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

Icky

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Nilson

Answer 18

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

Calia

Answer 19

Best solution for this problem is

1. Delete your package-lock.json.
2. Downgrade your next.js version "12.1.6" from current version.
3. run npm i --force command.
4. now run npm run dev command and it will work.

Lynnet

This works for me! and update node to last version (current 20) – Egor

Answer 20

None of these actually worked for me. The real problem in my case was I had 32 bit NodeJS installed, though my system was of 64 bits. Installing the 64 bit Node installer fixed the issue.

here's a link to an issue I found about this: https://github.com/vercel/next.js/discussions/57951

Panjabi

Answer 21

My solution was to

• remove the @next package from the node_modules folder

• remove the package lock and then run

• npm install and that was it

Freezedrying

Answer 22

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.

Neptunian

Answer 23

I followed this answer + the official NextJs docs and it worked.

The steps I did:

1. Remove package-lock.json y node_modules
2. Reinstall deps with npm install --legacy-peer-deps --force
3. Then run the development environment (a message will be displayed saying that a lockfile without SWC deps has been found and that it's going to be patched ... it's patched automatically)

4. Reinstall deps with npm install --legacy-peer-deps

Notes:

• The flag --legacy-peer-deps depends on Node's version your're using and how it uses peer deps.
• I'm using Node 14.18.1 and NPM 9.6.6 on my project.
• If you use NVM to manage your Node versions you can update NPM to the latest compatible version with your Node version by running nvm install-latest-npm

Bowdlerize

Answer 24

After spending hours trying to figure out why my CI/CD pipeline seemingly couldn't download the SWC binary for my node alpine image, I decided to take a look at the "failed loading SWC" page in the NextJs docs and try a few of their suggestions.

(Yes, I tried cleaning the npm cache via npm cache clean --force and even just simply deleting my node_modules and package-lock.json and then re-installing, but none of the suggestions worked.)

I was originally getting some nasty error when next-swc was downloading:

ZlibError: zlib: unexpected end of file

that pointed me to node_modules/next/next-swc-fallback/@next/swc-linux-x64-musl that it was unable to decompress, but it turns out I was reading too much into this error, when it was an error with my install step.

In the line where I ran npm install in my pipeline script, I had a the --no-optional flag (i.e. npm i --no-optional).

Once I removed the --no-optional flag as suggested by the docs, the cryptic ZlibError went away and my pipeline completed.

Hopes this saves you some hours search around about a ZlibError for nothing!

Telpher

Answer 25

For anyone who gets here from the error

ZlibError: zlib: unexpected end of file

This can also happen if your yarn / npm install was done from a different OS or version of Node...

If you are trying to run in a Docker container but did a yarn install outside the container, that could cause the problem.

Re-run yarn install or npm install from inside the Docker container (or VSCode Development Container)

Delphadelphi

Answer 26

For me installing the following NPM packages did the trick:

pnpm i -D @next/swc-linux-arm64-gnu @next/swc-linux-arm64-gnu @next/swc-linux-arm64-musl

Scumble

Answer 27

My issue was when running tests with jest. It would not wait for the download to complete before running tests. I fixed by adding the required binary as an optional dependency. In my case,

npm i -D @next/swc-linux-x64-gnu --save-optional

Hope this helps someone.

Godless

Answer 28

i avoided using force or legacy peer, so i try this 👉 npm install next@latest and it works for me

Coleridge

Answer 29

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-

Carriole

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Discus

Op didn't specify that they were running on Windows, so this doesn't answer the question. – Fijian

Answer 30

Just Download Redistributable C++ 2015

Splenectomy

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Nilson

See the answer pattern for reference, there is answer about Redistributable C++ 2015 https://mcmap.net/q/275831/-the-specified-module-could-not-be-found-d-next-js-firstapp-node_modules-next-swc-win32-x64-msvc-next-swc-win32-x64-msvc-node-duplicate – Yellowwood

Op didn't specify that they were running on Windows, so this doesn't answer the question. – Fijian

Answer 31

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

Kinna