500 undefined is not an object (evaluating 'input.message') on production
Hi, I’m getting a 500 error in production, but I can’t figure out where the error originates.
It only happens in production, and I’m unable to reproduce it on my local machine.
I’m running Nuxt v4 with Strapi v5.
43 Replies
Hi @𝔗i𝔯i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message “500 undefined is not an object (evaluating 'input.message')” in production, but not locally, suggests that somewhere in your code or API response, you are trying to access input.message, but input is undefined. This kind of error is often related to differences in data availability or structure between development and production environments.
From the knowledge sources, there are a few relevant patterns and troubleshooting steps:
1. SSR/Production Differences: Several issues in Nuxt arise only in production due to differences in how data is fetched or hydrated. For example, hydration mismatches or undefined properties can occur if the data is not available when the component renders, especially with SSR or SSG. One Stack Overflow post describes a similar issue where a property is undefined only after a page refresh or in certain environments, suggesting that the data may not be loaded as expected at render time. Defensive coding (e.g., using optional chaining or null checks) is recommended to avoid such errors:
Cannot access to data in title from Strapi with GraphQL and Nuxt.js 2. API Response Differences: If you are using Strapi as your backend, ensure that the API response structure is consistent between environments. Sometimes, environment variables or deployment configurations can cause the backend to return different data, or even errors, in production. Double-check your runtimeConfig and API endpoints to ensure they are set correctly for production, as shown in this example: Unable to correctly retrieve API objects 3. Error Handling in Nuxt: Recent Nuxt changes ensure that error data and status messages are passed to error.vue for rendering, but if your error handling assumes a certain structure (e.g., always having input.message), it may fail if the backend returns a different shape or an error object without the expected properties in production.
fix(nuxt): pass error data to error.vue
fix(nuxt): pass statusMessage to error.vue What you can do: - Add null/undefined checks before accessing input.message. - Log the full input object (or the API response) in production to see what is actually being returned. - Ensure your API and frontend are using the same data structure in both environments. - Check for differences in environment variables or runtimeConfig between local and production. If you can provide a code snippet or more context on where input.message is accessed, I can help you further pinpoint the issue. Based on the knowledge sources, the most likely cause is a missing or undefined property in your data, which is not being handled defensively in your code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Cannot access to data in title from Strapi with GraphQL and Nuxt.js 2. API Response Differences: If you are using Strapi as your backend, ensure that the API response structure is consistent between environments. Sometimes, environment variables or deployment configurations can cause the backend to return different data, or even errors, in production. Double-check your runtimeConfig and API endpoints to ensure they are set correctly for production, as shown in this example: Unable to correctly retrieve API objects 3. Error Handling in Nuxt: Recent Nuxt changes ensure that error data and status messages are passed to error.vue for rendering, but if your error handling assumes a certain structure (e.g., always having input.message), it may fail if the backend returns a different shape or an error object without the expected properties in production.
fix(nuxt): pass error data to error.vue
fix(nuxt): pass statusMessage to error.vue What you can do: - Add null/undefined checks before accessing input.message. - Log the full input object (or the API response) in production to see what is actually being returned. - Ensure your API and frontend are using the same data structure in both environments. - Check for differences in environment variables or runtimeConfig between local and production. If you can provide a code snippet or more context on where input.message is accessed, I can help you further pinpoint the issue. Based on the knowledge sources, the most likely cause is a missing or undefined property in your data, which is not being handled defensively in your code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
here is the code
index.vue under pages/
@kapa.ai i didn't access input anywhere
my idea were that the plugins are the problem, but its not
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources provided, there is no explicit mention of a 500 error with the message "undefined is not an object (evaluating 'input.message')" that occurs only in production, nor is there a direct reference to this error being caused by plugins in Nuxt v4 with Strapi v5.
However, similar issues have been reported where properties are undefined in production but not in development. These are often related to differences in data fetching, hydration, or SSR context loss, rather than plugins specifically. For example, one issue describes how SSR context is cleared during error handling, which can cause data to be lost and lead to undefined errors when rendering components that expect certain data to be present. This can result in 500 errors if your code tries to access properties on undefined objects during SSR or error rendering, even if you don't explicitly reference something like input.message in your code. The error may originate from a dependency, a composable, or a component expecting data that isn't available due to SSR context reset or API response differences in production environments<source>SSR context is cleared during error handling, causing duplicate API requests for critical initial data</source>.
The knowledge sources do not provide a direct solution or confirm that plugins are the cause. If you have already ruled out plugins, it may be helpful to:
- Check for any differences in your API responses or data availability between development and production.
- Add defensive checks for undefined data in your components.
- Review your error handling and SSR data fetching logic.
I'm sorry, but there's no information in the knowledge sources that directly identifies plugins as the cause of this specific error. If you can provide more details or a code snippet, it may help narrow down the issue further.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai here code snippet
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but you mentioned "here code snippet" but did not provide any code snippet in your message. If you share the relevant code, I can review it and help you identify the source of the error based on the available knowledge sources.
As it stands, the knowledge sources do not contain enough information to analyze your specific code or pinpoint the cause of the "undefined is not an object (evaluating 'input.message')" error without seeing the actual code in question. Please provide the code snippet so I can assist you further.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai here
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but there is no code snippet included in your message. The knowledge sources do not provide enough information to answer your query without seeing the relevant code. If you provide the code snippet, I can review it and offer guidance based on the available information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai maybe this helps
const { data: projects } = await useAsyncData("projects", async () => {
const res = await find("projects", {
populate: ["banner"],
sort: "createdAt:desc",
pagination: {
page: 1,
pageSize: 3
},
locale: locale.value,
})
const items = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
if (!$md) {
console.error('❌ $md plugin not available!')
}
if (!$utils) {
console.error('❌ $utils plugin not available!')
}
return items.map((item: any) => {
const desc = item.description || "";
const shortDesc = desc.length > 100 ? desc.substring(0, 100) + "..." : desc;
const title = item.title;
const shortTitle = title.length > 16 ? title.substring(0, 16) + "..." : title;
return {
id: item.id,
title: item.title,
shortTitle: shortTitle,
shortDescHtml: $md.render(shortDesc),
descriptionHtml: $md.render(desc),
url: item.url,
link: "/projects/" + item.documentId,
image:
item.banner?.formats?.medium?.url ??
item.banner?.url ??
"https://cdn.sje.dev/placeholder.png",
}
})
})
const { data: socials } = await useAsyncData("socials", async () => {
const res = await find("socials", {
sort: "prio:desc",
locale: locale.value,
})
const items = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
return items.map((item: any) => {
return {
...item
}
})
})
const { data: careers } = await useAsyncData("careers", async () => {
const res = await find("careers", {
sort: "date_from:desc",
pagination: {
page: 1,
pageSize: 3,
}
})
const items = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
return items.map((item: any) => ({
shortDesc: $md.render(String(item?.shortDesc ?? '')),
...item
}))
})
const { data: techstacks_categories } = await useAsyncData("tech-stacks-categories", async () => {
const res = await find("tech-stacks-categories", {
sort: "order:asc",
populate: "*",
})
const items = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
return items.map((item: any) => ({
...item
}))
})
<section
id="projects"
class="relative border border-white/10 rounded-3xl bg-gradient-to-b from-[#141416] to-[#0b0b0c] p-6 md:p-12 mt-8 shadow-xl"
>
<h2 class="text-3xl md:text-4xl font-extrabold text-purple-400 mb-8 mt-2 text-center md:text-left">
{{ $t("projects.title") }}
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" v-if="projects && projects.length > 0" >
<div
v-for="project in projects"
:key="project.id"
class="group relative bg-[#121214]/70 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-purple-500/20"
>
<div
class="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-purple-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 pointer-events-none"
></div>
<div class="overflow-hidden">
<img
:src="project.image"
alt="Project image"
class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
/>
</div>
<div class="relative p-5 space-y-3">
<h3 class="h-[1.2rem] text-xl font-semibold text-white group-hover:text-purple-400 transition-colors">
{{ project.shortTitle }}
</h3>
<main
class="h-[5rem] text-gray-400 text-sm max-w-none"
v-html="project.shortDescHtml"
/>
</div>
</div>
</div>
<NotFoundView v-else />
</section>
Let me check the knowledge base for you again. One moment! :books:
----------------------
Thank you for sharing your code. Based on the knowledge sources and your code snippet, here are some observations and suggestions:
1. Defensive Checks for Plugins
You are already checking for the existence of
Your code could throw errors in production if plugins like
$md and $utils plugins and logging an error if they are not available:
However, you proceed to use $md.render(...) regardless of whether $md is defined. If $md is undefined in production (perhaps due to plugin registration order or SSR differences), this would cause a runtime error. You should return early or provide a fallback if the plugin is missing.
2. Data Structure and SSR Differences
Several issues in the knowledge sources highlight that data can be undefined or have a different structure between development and production, especially with SSR. For example, hydration mismatches or missing data can cause errors that only appear in production or after a full page reload, not during hot reloads. This is similar to what you describe and is a common pitfall in Nuxt SSR apps when data is not always available as expected at render time. Defensive coding is recommended:
And in your template:
This is good, but ensure that all properties accessed in the template are also checked for existence.
3. Error Origin
The error message you reported (undefined is not an object (evaluating 'input.message')) does not appear directly in your code, but could be thrown by a plugin, a composable, or a dependency that expects a certain structure in the data or context. The knowledge sources mention that SSR context loss or error handling can cause data to be undefined, leading to such errors, even if you don't reference input.message yourself<source>SSR context is cleared during error handling, causing duplicate API requests for critical initial data</source>.
4. Recommendations
- Add more robust null checks before using any plugin or property that might be undefined, especially in production.
- Log the full data and plugin objects in production to see what is actually available.
- Check your plugin registration to ensure $md and $utils are available both on server and client.
- Review your error handling to ensure that errors are caught and handled gracefully, and that you are not assuming the presence of properties that may be missing in production.
5. No Direct Mention of input.message in Knowledge Sources
The knowledge sources do not explicitly mention an error with input.message or a direct cause in Nuxt v4 with Strapi v5. The most relevant information is about SSR context loss and hydration issues leading to undefined data.
---
Summary:Your code could throw errors in production if plugins like
$md are not available or if data is missing due to SSR differences. The knowledge sources suggest that SSR context loss and hydration mismatches are common causes of such issues, but do not provide a direct answer for the input.message error. Strengthen your null checks and plugin availability checks, and log more information in production to help diagnose the root cause.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai second point has changed nothing. error still the same. any other ideas?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources provided, there is no explicit solution or direct mention of the specific error "undefined is not an object (evaluating 'input.message')" persisting after adding defensive checks in Nuxt v4 with Strapi v5. The sources do highlight that such errors can be related to SSR context loss, hydration mismatches, or missing data during server-side rendering, especially when using plugins or composables that expect certain data to always be present<source>SSR context is cleared during error handling, causing duplicate API requests for critical initial data</source>.
If adding null checks and defensive coding has not resolved the issue, and since the error message does not directly correspond to any code or pattern in the knowledge sources, I'm sorry, but there's no further information in the provided sources to confidently suggest another solution or pinpoint the root cause of your error.
If you can provide more details about where the error is thrown (such as a stack trace or the context in which
input.message is being accessed), it may help narrow down the issue. Otherwise, the knowledge sources do not contain enough information to offer a more specific fix.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@704629185808695338> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
do you host this in root or in /random. if the second you should specify a baseURL
other reasons you get 500 are quite different, so console error would be great if you paste it here
you may also have forgotten to add ENV variables to your github variables or wherever you deploy your project from. you should specify vars in the workflow as well.
what env vars shoud i use?
what do you mean by that?
is just a docker container
console error just says 500
and the error is provied above
Oh i see now, in that case, ithink the problem is you are not waitng for the i18n util to load. That is why it throws that error, with what i can understand from the error.
But it all depends on how you have the logic implemented, you have to double check things, what happens when you build manually?
when i build manually the error doesn't appear. Only with docker what i know
but i also think that the error appears because of i18n.
Do you know how i can fix the error?
weird thing, i need to create a i18n folder for locales
and chatgpt mean that this is the problem. but it can't work without it :mhh:
ye can confirm that i18n is the error
pretty sure the problem is somewhere in the code you are requiring something without waiting for that to finish, or at least a check is missing to let it know its not available.
if you have the project in a repo maybe try to clone it in a new directory and try running it, if the error then happens in development as well, the problem is that some file or config you are not providing
oke check i will try later
do you know any code or resource to wait or check if its ready?
it depends on your config and how you have implemented things. the error itself does not really provide a proper explanation.
just make sure you are rendering code if the conditions are met
oke but on what condition :cat_ok:
lets say you need item.name you may want to add an if block around it or just do item?.name
depends on your usage
yeah okay check, but i have on every segment where data are being fetch a if else
and it works (see picture)
just tested it on a new directory and it works
great!
so did you find what was the issue
i guess its internal stuff non related to your code
when it builds does it not show the error, usually they catch it.
also im not familiar with strapi too much but do you have to add your url in strapi to allow collecting data
nevermind you get messages.json
i would suggest trying disabling ssr or at least the index page
or use client only for certain code parts
cool domain tho
thanks haha
how can i disable it on the index page?
yeah i had to, but this works.
The weird think, when i do my custom error where the navbar is, i can use these links and navigate and the it looks like the error was never here
oh so its an hydration error then
i think, maybe?
@kpsh any fix i can try?
i have no other idea ,then trying disabling ssr, did you try that?
no just in a few minutes or hours
okay without ssr it runs
@kpsh
so you have to debug now the components 1 by 1
use chrome debugger
its powerful
since when chrome debuger can this