Nuxt3 encountered a request error for an unhandled 500 fetch failure at the http://localhost:3000/__nuxt_vite_node__/manifest url

Can you help me understand this error? https://i.stack.imgur.com/0FGa4.png

Without making any adjustments to my code, the app builds successfully. However, when running it on dev mode, the following error appears: npm run dev

I have attempted rebuilding the app, deleting all node_modules, and updating the dependencies.

Below is the stack trace:

at async $fetchRaw2 (/D:/IAICB-70/inteliaiclipboard/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:745:20
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:826:64
at async /D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:378:22
at async Object.handler (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1196:19)
at async toNodeHandle (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1271:7)
at async Object.ufetch [as localFetch] (/D:/IAICB-70/inteliaiclipboard/node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (/D:/IAICB-70/inteliaiclipboard/.nuxt/dev/index.mjs:462:30)
at async Server.toNodeHandle (/D:/IAICB-70/inteliaiclipboard/node_modules/h3/dist/index.mjs:1278:9)
vue.jsnuxt3

Answer №1

To update your development script in the package.json file for node version 18, follow the steps below:

"dev": "nuxt dev --host 0.0.0.0"

If the problem persists, try:

"dev": "nuxt dev --host 0.0.0.0 --https --ssl-cert localhost.pem --ssl-key localhost-key.pem"

If you are using docker, include this line in your docker file:

ENV HOST=0.0.0.0

The issue may be related to SSL or compatibility with node v18.
It was working without issues in v16.

Answer №2

After some trial and error, I finally got everything up and running smoothly. I followed the steps outlined in a helpful guide on storyblok's website.

Here is my current setup configuration:

"proxy": "mkcert -install && mkcert localhost && local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem",
"dev": "nuxt dev",

To get things working, I ran the proxy command first using npm run proxy, and then opened another terminal to execute:

npm run dev

With these commands completed, my project successfully launched at https://localhost:3010/. Awesome progress!

Answer №3

One solution that worked for me was including NODE_TLS_REJECT_UNAUTHORIZED=0 in my environment variables. You can find more information at https://example.com/docs/api/commands/dev#nuxi-dev

For example, you can modify the "dev" script in the package.json file like this:

"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing JWT tokens using Vue resource interceptor

I am currently working on creating a custom vue-resource interceptor that handles the refreshing of JWT access tokens upon expiration. My approach involves implementing a post-request callback to detect token expiration errors (status == 401). The idea is ...

vue.jsvue-resource

Troubleshoot your Vue.js application using Visual Studio Code. Encounter an unidentified breakpoint error

I'm encountering a problem with debugging my Vue.js project using VS Code and Chrome. I followed the official guide on the website Guide, but it's not working for me. The error I keep running into is: unverified breakpoint What am I doing wrong? ...

javascriptgoogle-chromenpmvue.jsvisual-studio-code

Interaction between the Vue parent and any child component

I am working with a series of components that are structured in multiple levels. Each component has its own data that is fetched over AJAX and used to render child components. For instance, the days parent template looks like this: <template> &l ...

javascriptvue.jsvuejs2

Vue: Exploring the Restriction of Using refs in Component Templates

I can't seem to figure out Vue refs. Whenever I define them in my main Vue instance's template, they work perfectly fine. However, when I define them within a component template, they don't seem to work at all. What could be causing this iss ...

vue.jsvue-component

What is the best way to handle asynchronous requests in frontend development with Nuxt.js?

Recently delving into Vue and Nuxt, I have been grappling with a query surrounding asynchronous requests. My understanding so far is that utilizing asyncData along with axios in Nuxt allows for fetching data that can be showcased on the frontend. However, ...

vue.jsnuxt.jsserver-side-rendering

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

cssvue.jswebpackproduction

What could be the reason behind my Vue 3 page not refreshing its content when navigating to a new page?

I am experiencing an issue with my Vue3 template file that is fetching data from Strapi. While it works fine on my local machine, the content only loads correctly on the first page load when I run it online. Subsequent page changes do not update the cont ...

vue.jsnuxt.jsstrapi

Peer dependency conflict detected: [email protected]

Encountering a conflicting peer dependency error: [email protected] while attempting to build/deploy my Vue CLI application using Heroku: npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue ...

vue.jsherokueslintpeer-dependencieseslint-plugin-vue

How can we efficiently trigger a function that sends an axios request by leveraging data from a v-for loop?

Currently, I am developing an e-commerce platform using Rails and VueJS. In order to display the orders of a specific user, I have created a component file. Within this component, I am utilizing a v-for loop to iterate over and showcase all the information ...

javascriptruby-on-railsvue.jsaxiosvue-component

When utilizing a put method with a form in Vue3, Axios is returning a status of 201, but unfortunately, no visible

I've encountered an issue when trying to update my user information using axios. Despite receiving a status of 201, the data doesn't seem to change when I submit the form. Strangely enough, this works perfectly fine when tested in Postman... Bel ...

vue.jsaxiosput

What can be done to mute [Vue-warn] during prop validation?

Is there a way to suppress the default Vue warning [Vue-warn] when displaying a custom validator message on a prop? I am currently seeing both the custom error message and the Vue warning. This is what my prop looks like: props: { mode: String, defaul ...

vue.jsvuejs2vue-componentvue-props

"Why is it that in a Vue object, only half the tag is needed in the line 'template: "<App/>'"?

Upon using the Vue webpack template, I came across code that looks like this: /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', // <-- components: { App } }) I understand what this code is ...

vue.js

Retrieving real-time data in VueJS using vuex framework

I run a shop with various components that rely on common data: export default new Vuex.Store({ state: { _invoices: [], }, mutations: { setInvoices: (state, invoices) => (state._invoices = invoices), }, actions: { ...

vue.jsvuexlazy-initialization

Ways to modify an object similar to manipulating an array collection

Hey there, I've heard that iterating and editing objects (not arrays) is not the best practice. Is there a more efficient way to do it as easily as it can be done with an array of objects? Check out this link for reference new Vue({ el: '#app ...

javascriptvue.jsvuejs2

Set addition fails to trigger computed property

Disclaimer: I'm new to JavaScript I attempted to track all current errors within a component in the following manner, but I seem to be missing something. My error set is updated whenever the username changes, therefore, my computed property displayEr ...

vue.jsvuejs2vue-componentcomputed-properties

Can an iterated element be used as an object key in the data property within a "v-for" loop?

My situation is similar to this: v-for="i in 10" new Vue({ el: '#app', data: { howManyRow: null, date: { 1: Sat Dec 28 2019 00:00:00 GMT+1100 (Australian Eastern Daylight Time), 2: Sat Dec 28 2019 00:00:00 GMT ...

vue.jsvuejs2

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Currently, I am facing a dilemma in my Vue.js application. I am making an API call within the created() hook, but there are certain tasks that I need to trigger only after the API call has been completed. The issue is that this API call usually takes aroun ...

javascriptvue.js

what is the most effective method for integrating Vue with Express?

1: I have successfully installed expressjs on my system. 2: Following that, I used npm to install the vue framework by running 'npm install vue --save'. 3: Additionally, I utilized handlebars as the template-engine for expressjs. In my index.hbs ...

expressvue.js

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

htmlvue.jscodepen

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

<template> <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slid ...

javascripthtmlvue.jsswiper.js