Type error: A function whose declared type is neither ‘void’ nor ‘any’ must return a value.
5:58:01 PM: 16 | // …
5:58:01 PM: 17 |
5:58:01 PM: > 18 | const Home: NextPage = (): JSX.Element => {
5:58:01 PM: | ^
5:58:01 PM: 19 | const [loading, setLoading] = useState(false);
5:58:01 PM: 20 | const [bio, setBio] = useState(“”);
5:58:01 PM: 21 | const [vibe, setVibe] = useState(“Funny”);
5:58:02 PM:
5:58:02 PM: “build.command” failed
5:58:02 PM: ────────────────────────────────────────────────────────────────
5:58:02 PM:
5:58:02 PM: Error message
5:58:02 PM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
5:58:02 PM:
5:58:02 PM: Error location
5:58:02 PM: In Build command from Netlify app:
5:58:02 PM: npm run build
5:58:02 PM:
I can’t seem to deploy an app and have zero idea how to go about fixing it,
Have tried everything
This is telling you the function must return a value.
E.g.
This function does not return a value
const aFunc = () => {
console.log("something")
}
This function does return a value
const aFunc = () => {
return "something"
}
I have a return that is what is confusing,
Adding more error logs:
6:06:15 PM: Type error: Type ‘() => void’ is not assignable to type ‘NextPage<{}, {}>’.
6:06:15 PM: Type ‘() => void’ is not assignable to type ‘FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }’.
6:06:15 PM: Type ‘() => void’ is not assignable to type ‘FunctionComponent<{}>’.
6:06:15 PM: Type ‘void’ is not assignable to type ‘ReactElement<any, any> | null’.
6:06:15 PM: 16 | // …
6:06:15 PM: 17 |
6:06:15 PM: > 18 | const Home: NextPage = () => {
6:06:15 PM: | ^
6:06:15 PM: 19 | const [loading, setLoading] = useState(false);
6:06:15 PM: 20 | const [bio, setBio] = useState(“”);
6:06:15 PM: 21 | const [vibe, setVibe] = useState(“Funny”);
6:06:15 PM:
6:06:15 PM: “build.command” failed
6:06:15 PM: ────────────────────────────────────────────────────────────────
6:06:15 PM:
6:06:15 PM: Error message
6:06:15 PM: Command failed with exit code 1: CI=‘’ npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
6:06:15 PM:
6:06:15 PM: Error location
6:06:15 PM: In Build command from Netlify app:
6:06:15 PM: CI=‘’ npm run build
6:06:15 PM:
6:06:15 PM: Resolved config
6:06:15 PM: build:
6:06:15 PM: command: CI=‘’ npm run build
6:06:15 PM: commandOrigin: ui
6:06:15 PM: environment:
6:06:15 PM: - OPEN_AI_KEY
6:06:15 PM: - NEXT_PRIVATE_TARGET
6:06:15 PM: publish: /opt/build/repo/.next
6:06:17 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
https://github.com/walter-grace/screenwriterPRO/blob/main/pages/index.tsx
GIthub code if someone could try and figure out why this error is happening
The repository you have shared is set to private.
Try it now, it should be public now
The same things happens locally when I run npm run build on your code, so this is nothing to do with Netlify.
In essence you are using a Typescript project and the function has no type hence it becomes void which isn’t compatible with NextPage<{}, {}>.
Suggest looking at this Next.js documentation or try searching your preferred search engine (here’s a search on DuckDuckGo that contains several posts you might find useful.)
Is there any easy fix in the code? I am still unclear how to fix it
Add the correct return type to the function.
Do you know what that would look like for my code?
Have a look at this example from the Next.js documentation
import { NextPage } from 'next'
interface Props {
userAgent?: string;
}
const Page: NextPage<Props> = ({ userAgent }) => (
<main>Your user agent: {userAgent}</main>
)
Page.getInitialProps = async ({ req }) => {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
export default Page
The error message you provided indicates that there is a problem with the Home component in your code. Specifically, it seems to be related to the return type of your component function.
When using TypeScript, you need to explicitly declare the return type of any functions that are not returning void or any. In the case of your Home component, it looks like you are not declaring a return type at all, which may be causing the error.
To fix the issue, you can add a return type declaration to your component function. Based on your code snippet, it looks like the return type should be JSX.Element. Here’s an example:
const Home: NextPage = (): JSX.Element => {
const [loading, setLoading] = useState(false);
const [bio, setBio] = useState("");
const [vibe, setVibe] = useState("Funny");
// Your component logic here
return <div>Hello world!</div>;
}
In this example, we have added the : JSX.Element return type declaration after the function signature. You should replace the Hello world! JSX element with the actual content you want to render in your component.
Once you have made this change, try rebuilding and deploying your app again to see if the issue is resolved. If you continue to experience problems, please provide more information about the specific errors you are seeing so that I can assist you further.
1 Like