Another day, another Nuxt project. Nuxt has just released v3.14.1592
, which I chose because I wanted to have a look at the unannounced Nuxt v4
, which uses TailwindCSS v4
and other packages with major changes.
So I ran the usual single-line command line to install Nuxt from scratch and I’m ready to explore—or so I had thought.
As package manager, I use bun
. It simply turned out to be the fastest. For npm
1, yarn
2, and pnpm
,3 you’ll need another command. But this is easily explained on the “Installation” page of the official Nuxt 3 documentation.
I installed Nuxt via bun x nuxi@latest init <project-name>
and start the development server. Then came the error.
The Problem
Even with a clean installation (and yes, I mean no changes at all), every time the development server runs (yarn dev
) and I make a change to nuxt.config.ts
, I receive the following error in the terminal:
ℹ nuxt.config.ts updated. Restarting Nuxt... 05:10:20
ERROR [unhandledRejection] Nuxt instance is unavailable! 05:10:20
at useNuxt (node_modules/@nuxt/kit/dist/index.mjs:36:11)
at normalizeTemplate (node_modules/@nuxt/kit/dist/index.mjs:2988:18)
at node_modules/nuxt/dist/index.mjs:5439:47
at Array.map (<anonymous>)
at generateApp (node_modules/nuxt/dist/index.mjs:5439:33)
at async _applyPromised (node_modules/perfect-debounce/dist/index.mjs:54:10)
ERROR [unhandledRejection] Nuxt instance is unavailable! 05:10:20
at useNuxt (node_modules/@nuxt/kit/dist/index.mjs:36:11)
at normalizeTemplate (node_modules/@nuxt/kit/dist/index.mjs:2988:18)
at node_modules/nuxt/dist/index.mjs:5439:47
at Array.map (<anonymous>)
at generateApp (node_modules/nuxt/dist/index.mjs:5439:33)
at async _applyPromised (node_modules/perfect-debounce/dist/index.mjs:54:10)
ℹ Re-optimizing dependencies because vite config has changed 05:10:21
✔ Vite client built in 15ms 05:10:21
✔ Vite server built in 64ms 05:10:21
✔ Nuxt Nitro server built in 203 ms nitro 05:10:21
ℹ Vite client warmed up in 0ms 05:10:21
ℹ Vite server warmed up in 214ms
BashA little awkward because it did not break the app. But it was an ugly error, and so I did some research. A fairly recent comment by @degoya on GitHub last week pointed out that downgrading to v3.14
would fix the issue.
What didn’t Work
I did exactly that—while forgetting one tiny but important detail: the version constraint in the packages.json
.
My original, error-producing packages.json
:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^3.14.1592",
"vue": "latest",
"vue-router": "latest"
}
}
JSONThe anticipated fixed version, I figured, would then be:
"nuxt": "^3.14",
JSONSo, I deleted all the packages with rm -rf -node_modules bun.lockb
and reinstalled them with bun i
, this time in the “right” version. bun dev
started the development server, then a random change in nuxt.config.ts
, and—still the same error!
The Solution
It turned out that the ^3.14
would include the 3.14.1592
version which started the problem. So, the solution is fairly simple: remove the caret (^
) from your "nuxt"
dependency version and enter 3.14.0
. No version constraints here.
Or, if you like to copy and paste:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "3.14.0",
"vue": "latest",
"vue-router": "latest"
}
}
JSONThis should fix it. For real!