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.

score 106 · Accepted Answer · edited Dec 15 '21 at 10:04

106

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

edited Dec 15 '21 at 10:04

ouflak

2,458
10
44
49

answered Dec 15 '21 at 08:33

Joon Kyoung

1,084
2
7
2

4

Did the trick. Sometimes you just need to unplug it and plug it back in ;) – Ken Prince Jan 17 '22 at 23:56
it worked I was facing issue - Attempted to load @next/swc-darwin-arm64, but it was not installed – Sanskar Tiwari Apr 19 '22 at 08:18
4

Sometimes you also need to run `npm cache clean --force` before `npm install`, especially if you upgraded to higher version of Node.js recently. – Kiryl Anokhin Apr 20 '22 at 08:48
Why this answer – samuelnehool Nov 17 '22 at 11:17
1

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! – Kaspar Poland Jul 04 '23 at 20:02

Ekama Emmanuel Uloho · Answer 2 · 2021-11-20T13:57:48.460

16

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

edited Nov 20 '21 at 13:57

answered Nov 03 '21 at 06:46

Ekama Emmanuel Uloho

918
1
7
16

3

This is last hope scenario and this certainly shouldn't be an accepted answer – Pushkin Mar 29 '22 at 11:13
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? – Ekama Emmanuel Uloho Mar 29 '22 at 13:47
1

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 – Pushkin Mar 31 '22 at 06:30
... well, for me just running `npm install next@canary` solved the problem. – Roy Toledo May 31 '22 at 02:38
Indeed, npm install next@canary worked best – Andrei Drynov Jul 19 '22 at 13:17
adding to all of this, I can confirm by `yarn add next@canary` did the job, solved the problem. – Rokas Rudzianskas Sep 21 '22 at 13:09

score 8 · Answer 3 · answered Dec 06 '21 at 18:50

8

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

answered Dec 06 '21 at 18:50

Konstantin Chemshirov

137
1
4

3

Could you add more details? Why this work? – Federico Peralta Aug 19 '22 at 02:05

score 5 · Answer 4 · answered May 30 '22 at 12:25

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

score 5 · Answer 5 · answered Jun 18 '22 at 22:42

5

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

answered Jun 18 '22 at 22:42

Ali Nawaz

89
1
6

score 4 · Answer 6 · answered Apr 16 '22 at 13:11

4

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

answered Apr 16 '22 at 13:11

Alaeddine

49
1

score 3 · Answer 7 · answered Dec 05 '21 at 00:38

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

score 2 · Answer 8 · edited Nov 03 '21 at 20:31

2

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

edited Nov 03 '21 at 20:31

Jeremy Caney

7,102
69
48
77

answered Nov 03 '21 at 17:50

Nur Mongol

21
2

Same issue with v16. I downgraded to v14.9 and all is working well again. – Scott L May 24 '22 at 01:29

score 2 · Answer 9 · answered Nov 17 '21 at 09:10

2

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

answered Nov 17 '21 at 09:10

Milan Korangi

21
1
2

score 2 · Answer 10 · answered Feb 28 '22 at 20:24

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"

score 2 · Answer 11 · answered Mar 16 '22 at 05:37

2

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

answered Mar 16 '22 at 05:37

Yves Boutellier

1,286
9
19

score 1 · Answer 12 · answered Dec 01 '21 at 08:35

1

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

answered Dec 01 '21 at 08:35

Webby Wolf

35
1

1

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](/help/how-to-answer). – Community Dec 01 '21 at 09:28

score 1 · Answer 13 · answered Jul 15 '22 at 10:45

1

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

answered Jul 15 '22 at 10:45

Irfan DANISH

8,349
12
42
67

score 1 · Answer 14 · answered May 20 '23 at 20:01

1

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

answered May 20 '23 at 20:01

mehdi behvar

179
1
3

+1 for this - removing my `yarn-lock` and `node_modules` and then reinstalling didn't work for me whereas this did - thanks! – jimmyNames Aug 02 '23 at 20:41

score 0 · Answer 15 · edited Nov 08 '21 at 05:40

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.

score 0 · Answer 16 · answered Aug 17 '22 at 14:39

0

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.

answered Aug 17 '22 at 14:39

Virendra Sonkaria

11
4

score 0 · Answer 17 · answered Apr 10 '23 at 09:37

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",
  ...
}

score 0 · Answer 18 · answered May 09 '23 at 15:43

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

The steps I did:

Remove package-lock.json y node_modules
Reinstall deps with npm install --legacy-peer-deps --force
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)

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

score -1 · Answer 19 · edited Jun 07 '22 at 16:41

-1

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-

edited Jun 07 '22 at 16:41

General Grievance

4,555
31
31
45

answered Apr 23 '22 at 22:10

maesstro

49
7

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](/review/late-answers/31608587) – Ethan Apr 30 '22 at 00:12
Op didn't specify that they were running on Windows, so this doesn't answer the question. – Subfuzion Feb 24 '23 at 05:36

score -1 · Answer 20 · answered May 28 '22 at 04:17

-1

Just Download Redistributable C++ 2015

answered May 28 '22 at 04:17

Bigpatty

1

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](/help/how-to-answer). – Community May 29 '22 at 00:51
See the answer pattern for reference, there is answer about Redistributable C++ 2015 https://stackoverflow.com/a/70636610/8074416 – Harshad Prajapati Jul 27 '22 at 07:10
Op didn't specify that they were running on Windows, so this doesn't answer the question. – Subfuzion Feb 24 '23 at 05:37

score -4 · Answer 21 · answered Jan 27 '22 at 22:33

-4

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

answered Jan 27 '22 at 22:33

Preetham Nayak

1

Next failed to load SWC binary

21 Answers21

Linked

Related