The specified type '{ data: any; }' is incompatible with the type 'IntrinsicAttributes'. The property 'data' is not found in the type 'IntrinsicAttributes'

I'm encountering issues with the data property.

interface Props {
  params: { slug: string };
}

const Page = async ({ params }: Props) => {
  const data: any = await getPage(params.slug);

  // This section dynamically renders the appropriate organism (e.g., ContactUs or AboutUs etc...) within the PageComponent based on the dynamic route parameter.
  const PageComponent = dynamic(() =>
    import(`@/components/organisms/${data.slug}`).then(
      (module) => module.default
    )
  );

  return (
    <div>
      <PageComponent data={data} />
    </div>
  );
};

Error Type '{ data: any; }' is not assignable to type 'IntrinsicAttributes'. Property 'data' does not exist on type 'IntrinsicAttributes'.ts(2322) (property) data: any

The data functions correctly and logs as expected in my component, specifically in the contact-us component.

interface Props {
  data: any;
}

export default function ContactUs({ data }: Props) {
  console.log(data);
  return <div>{}</div>;
}

How can I resolve this type error?

Answer №1

It appears that the issue at hand is related to NextJS not being able to identify the type of import, leading to uncertainty regarding the props type.

A possible solution could look similar to this:

interface Props {
  params: { slug: string };
}

const Page = async ({ params }: Props) => {
  const data: any = await getPage(params.slug);

  // This code segment dynamically renders the appropriate organism (e.g., ContactUs or AboutUs etc...) within the PageComponent based on the dynamic route parameter.
  const PageComponent = dynamic<{data: any}>(() =>
    import(`@/components/organisms/${data.slug}`).then(
      (module) => module.default
    )
  );

  return (
    <div>
      <PageComponent data={data} />
    </div>
  );
};

Take note of the <{data: any}> in the dynamic call.

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

Does the Error page in Next JS 13 fail to properly manage fetch API errors?

After referencing the documentation for Next.js with app router, I followed the instructions to create an error.tsx page within my app folder (app/[lang]/error.tsx). This file contains the code provided in the docs. Additionally, I included some API calls ...

Tips for refreshing the service page in Ionic 2

One of my services is called "user-data", and its main function is to fetch "user data" when a request is received. I have a specific page that is responsible for displaying this "user data". Upon loading the page, it retrieves the data and displays it. ...

Can Next.js accommodate server-side redirection with internationalization?

I'm working on a small Next.js app that has pages accessible only to logged in users. To manage the authenticated routes, I created an HOC (withAuth) that handles redirection on the server side to prevent page flashing on the client side. Everything i ...

What steps can I take to limit access to my API exclusively for the Frontend?

I'm in the process of creating a gaming platform, and unfortunately, there has been an exploitation of the API. How can I establish a set of "approved domains" that are allowed to access my API? The previous misuse of the API resulted in individuals ...

When utilizing typescript to develop a node module and importing it as a dependency, an issue may arise with a Duplicate identifier error (TS2300)

After creating a project called data_model with essential classes, I built a comprehensive gulpfile.js. This file not only compiles .ts to .js but also generates a unified .d.ts file named data_model.d.ts, which exports symbols and is placed at the root of ...

Adjusting the Material UI Select handleChange function

const handleObjectChange = (event: React.ChangeEvent<{ value: unknown }>) => { const { options } = event.target as HTMLSelectElement; const selectedValues: object[] = []; for (let i = 0, l = options.length; i < l; i += 1) { if ...

Troubleshooting Problem with Uploading Several Photos to Firebase Storage

I need assistance with uploading multiple photos to Firebase Storage. Despite my efforts, it seems that the original upload keeps getting overwritten and the folder with the venueID property is not being created. Can someone provide some guidance on this i ...

Navigate between pages in Next.js without causing a re-render

In my application, I have two main pages: /pages index.js [page].js Both of these files contain the same content. This setup allows me to manage incoming requests on paths such as "/", "/foo", and "/bar". When I use the ...

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

Utilizing Next-Auth's Credential Feature - Redirecting post login and signout with the default page

I've been grappling with this all day, but haven't found a solution yet. All I want is to have a "login" button on the landing page that takes users to the default credential login page. After successful login, they should be directed to a speci ...

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

When Discord devs introduced this feature, I can't seem to wrap my head around how they intended Discord.GuildManager#create to function. How could they possibly have expected it to work with Discord.GuildCreateOptions#channels[0], for instance, { ...

Definition file for Typescript Angular 1.5 component

Encountering a problem with typescript and angular 1.5 - when building, an error pops up saying error TS2339: Property 'component' does not exist on type 'IModule'.. Could it be that I overlooked a definition file containing this proper ...

Oops! Looks like an issue has popped up: using require() of an ES module is not supported when using recharts in combination with next.js

I've noticed some similar questions, but none of them seem to address my particular issue. I'm currently working on a webapp using next.js (with typescript). Within the app, I am utilizing recharts, however, I am encountering a compilation error: ...

Exploring the capabilities of the Next.js router and the useRouter

import { routeHandler } from "next/client"; import { useRouteNavigator } from "next/router"; const CustomComponent = () => { const routerFromHook = useRouteNavigator(); } export default CustomComponent; Can you explain the disti ...

Contrast the different characteristics of string dynamic arrays in Angular 6

I am working with two arrays of strings. One array is a dynamic list of checkboxes and the other is the source to check if the item exists in the first array. I need to implement this dynamically using Angular 6, can you help me with this? Currently, the ...

Just made the switch to Mongoose 5.12 and hit a snag - unable to use findOneAndUpdate with the $push operator

After upgrading to Mongoose 5.12 from 5.11 and incorporating Typescript, I encountered an issue with my schema: const MyFileSchema = new Schema<IMyFile>({ objectID: { type: String, required: true }, attachments: { type: Array, required: false ...

Node.js, sigma.js, and the typescript environment do not have a defined window

When attempting to set up a sigma.js project with node.js in TypeScript, I encountered a reference error after starting the node.js server: ts-node index.ts The problem seems to be located within the sigma\utils\index.js file. <nodejsproject& ...

I am unable to access the object property in Typescript

Here is an object definition: const parsers = { belgianMobile: (input: string) => input.replace(/^(0032|0)(\d{3})(\d{2})(\d{2})(\d{2})/, '$1$2 $3 $4 $5').replace('0032', '+ 32 '), }; Now, I want ...

The database server at `aws.connect.psdb.cloud` was unable to authenticate the credentials provided for database `name`, resulting in authentication failure

Currently, I am using PlanetScale with Prisma on a Next.js app that I am attempting to host on Vercel. It runs smoothly on localhost without any errors, but when I try to deploy it, I encounter this authentication error: "Authentication failed against the ...

Dynamic Next.js Redirects configured in next.config.js

After building the project, I am looking to update Redirects routes. Currently, we have redirect routes on our BE Api. My goal is to fetch these redirect routes dynamically and implement them in next.config.js. Here is what I have attempted: const getUrls ...