There is no property called 'x' in type 'y'

Can anyone explain why TypeScript is telling me this: Property 'dateTime' does not exist on type 'SSRPageProps'.ts(2339)

Looking at my code below, I have data-time typed.

import React from "react";
import axios from "axios";
import { GetServerSideProps } from "next";

export default function SSRPage({ dateTime }: SSRPageProps) {
  return <main>{dateTime}</main>;
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await axios.get("https://worldtimeapi.org/api/ip");

  return {
    props: { dateTime: res.data.datetime },
  };
};

interface SSRPageProps {
  abbreviation: string;
  client_ip: string;
  datetime: string;
  day_of_week: number;
  day_of_year: number;
  dst: boolean;
  dst_from: string;
  dst_offset: number;
  dst_until: string;
  raw_offset: number;
  timezone: string;
  unixtime: number;
  utc_datetime: string;
  utc_offset: string;
  week_number: number;
}

Answer №1

Your interface includes the definition of datetime, but you are actually referencing dateTime

interface SSRPageProps {
  abbreviation: string;
  client_ip: string;
- datetime: string;
+ dateTime: string;
  day_of_week: number;
  day_of_year: number;
  dst: boolean;
  dst_from: string;
  dst_offset: number;
  dst_until: string;
  raw_offset: number;
  timezone: string;
  unixtime: number;
  utc_datetime: string;
  utc_offset: string;
  week_number: number;
}

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

Exploring NextJS: Creating nested routes with subpages, utilizing context and dynamic layouts

Currently, I am faced with the challenge of transitioning my React app to NextJS and integrating my existing react-router setup into the NextJS routing system. The page layout I am working on is as follows: When a user navigates to a collection/:collecti ...

Is it possible for input properties of array type to change on multiple components in Angular 9?

Encountering an interesting issue that I need clarification on. Recently, I developed a compact Angular application to demonstrate the problem at hand. The puzzling situation arises when passing an Array (any[] or Object[]) as an @Input property to a chil ...

Tips for positioning input fields and labels in both horizontal and vertical alignment

Below is the HTML code, and I want the tags to look like this: label1: input1 label2: input2 label3: input3 Instead, it currently looks like this: label1: input1 How can I modify the HTML to achieve the desired format? HTML: <div class=" ...

Customizing the Android Back Button behavior in NativeScript for a single specific page

I am currently using NativeScript version 5.2.4 along with TypeScript. My goal is to disable the back button functionality in one specific page only, but I'm facing an issue where it also disables the back button behavior for child pages. Below is the ...

Tips for eliminating contenthash (hash) from the names of JavaScript and CSS files

Google's cached pages are only updated once or twice a day, which can result in broken sites on these cached versions. To prevent this issue, it is recommended to remove the contenthash from the middle of the filename for JavaScript files and eliminat ...

What is the proper way to enhance properties?

In the process of developing a Vue3 app using Typescript, one of the components is designed to receive data through props. Initially, everything functioned smoothly with the basic setup: props: { when: String, data: Object }, However, I de ...

Is there a way to ensure that Tailwind CSS loads before rendering components in NextJS?

While developing my web application, I encountered an issue with the tailwind CSS styling. The styles seem to load correctly, but there is a slight delay before they take effect. This results in users seeing the unstyled version of the website briefly befo ...

Error in Writing Functional Components with Typescript in React

I am struggling to create a versatile functional component and encountering issues like the one shown in this https://i.stack.imgur.com/WQkKg.png: Here is the code snippet: interface IAppTable<Type> { height: number; data: Type[]; tableLayout: ...

Leverage the updateMe SDK function in NextJS/Dirctus to easily update the information of the current

Operating Environment: NextJS: 14.2.1 NextAuth: 4.24.7 Directus: 10.10.5 Issue I am encountering an error while trying to update the current user's details using a simple form with the updateMe function provided by Directus. Upon form submission, I ...

What is the most effective method to override parent styles while utilizing CSS Modules?

I'm currently using NextJS along with CSS Modules for styling purposes. One of my goals is to adjust the appearance of a component in different scenarios: When it's rendered normally on a page, utilizing props to specify className modifiers. W ...

The Route.ts file does not export any HTTP methods

Encountering an error while trying to migrate code from Next JS 12 with pages router in Javascript to Next JS 13 with TypeScript. ⨯ Detected default export in 'vibe\src\app\api\auth[...nextauth]\route.ts'. Export a name ...

Having issues with NGXS subscription not functioning properly when selecting a variable

Currently, I am working with Angular 11 and NGXS. One issue I am facing involves a subscription for a variable in the state. Here is the problematic subscription: @Select(state => state.alert.alerts) alerts$: Observable<any[]> ngOnInit(): void { t ...

Playfully imitating cross-fetch

I am currently running tests on a Next/React project using Jest with Node. I have also implemented cross-fetch in my project. However, I encountered an issue when trying to mock cross-fetch for a specific component: import crossFetch from 'cross-fetc ...

Using Next.js to Implement Firebase Push Notifications

Recently, I embarked on a project using Next.js and wanted to integrate Firebase's notification service. Despite following this helpful article, I encountered an issue with the getMessaging() method. The contents of my package.json file: { "na ...

In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Within the TypeScript code, a name variable is assigned input from another component. @Input() name : any ; In the ngOnChange function, I retrieve and print the SimpleChange object in the following manner. ngOnChanges(changes: SimpleChange){ console.l ...

Exploring the filter method in arrays to selectively print specific values of an object

const array = [ { value: "Value one", label: "Value at one" }, { value: "Value 2", label: "Value at 2" }, { value: "" , label: "Value at 3" } ...

Attempting to invoke the Replicate API

Whenever attempting to execute this POST request, I keep encountering a cors-policy error. Even when setting the mode to no-cors, I come across a caught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation e ...

Nextjs faces extended delays during user verification with Firebase Authentication

I am running a react application that utilizes firebase authentication. Within my global context, I have implemented a useEffect function to handle the actions related to the currently logged-in user: useEffect(() => { const unsubscribeAuth = fireb ...

Issue with data not refreshing when using router push in NextJS version 13

I have implemented a delete user button on my user page (route: /users/[username]) which triggers the delete user API's route. After making this call, I use router.push('/users') to navigate back to the users list page. However, I notice tha ...

Incorporate the Yammer share button into a Next.js application

Implementing the Yammer share button in next.js may seem straightforward at first glance. After reviewing the documentation provided by Yammer, it appeared as though I just needed to include the source in the Head Component and then call it using the <s ...