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

When defining functions in Typescript, the new() syntax is used

Can you explain the purpose of the type declaration for dialogComponent in this specific Typescript code snippet? createDialog(dialogComponent: { new(): DialogComponent }) : Promise<ComponentRef<DialogComponent>> { ... } (Referenced from ...

Using an external npm module in TypeScript can result in the tsc output directory being modified

In my TypeScript project, I have set up the build process to generate JavaScript files in the ./src/ directory. Everything works smoothly when building against existing npm modules, such as Angular 2 imports. However, I encountered a strange issue when I ...

Typescript: Declaring object properties with interfaces

Looking for a solution to create the childTitle property in fooDetail interface by combining two properties from fooParent interface. export interface fooParent { appId: string, appName: string } export interface fooDetail { childTitle: fooParent. ...

What is the best way to utilize the fresh Sanitizer API in Typescript?

Everything seems to be working well on Codepen, even without using window. It's surprising because I'm used to having to use window.x if ( 'Sanitizer' in window ) { console.log( 'sani', 'Sanitizer' in window ); } ...

A guide to setting up pdfjs-dist in Next.js 14

Could someone help me understand how to implement pdfjs-dist with next.js 14? I'm developing a web application that requires parsing PDFs, extracting text, and capturing screenshots of individual pages. I'm debating whether it's best to ha ...

What is the best way to merge import all with different elements?

My TSLint is flagging the following issue: Multiple imports from 'moment' can be combined into one. Here is the code causing the problem: import * as moment from 'moment'; import { Moment } from 'moment'; I have attempted ...

Establish a connection between two JSON files using the WordPress REST API

I have developed an app using ionic 2 that revolves around quotes. My goal is to manage these quotes (along with authors, categories, etc) using Wordpress and its REST API. Initially, I utilized normal posts for this purpose, but now I am exploring custom ...

Using Typescript to automatically infer strongly-typed recursive index types

Commencing with an Animal interface and a detailed map of animals residing on my farm: export interface Animal { species: string; edible: boolean; } export interface FarmMap{ [key: string]: Animal; } Everything seems to be running smoothly. Here ...

Is it possible for Nextjs routing catchAll to coexist with a slug folder within a route?

When converting my pages to ISR, I encountered an issue with handling params and dynamic routes. One example is where article/?pageNumber=2 needs to be rewritten as article/2 in middleware for improved performance. However, this change in routing structure ...

excessive server memory usage in a Next.js project

We are currently working on a Next.js project which is a builder project where web pages load from JSON data and users interact through the builder and dashboard. Our user base is not large, with usually 2-15 users actively engaging in the dashboard at any ...

Include type declarations for property values that resemble arrays in a generic object

Imagine you have a function that: receives an object with multiple properties and a property name; checks if the property holds an array; if it does, performs an action (such as printing the values it contains) Here's an illustration: function pro ...

NextJs Docker Image for ClientApp encountering a failure due to module not found error: Unable to locate module '/app/server.js'

I've been working on creating a docker image for my nextjs application, and everything seems to be running smoothly in my local environment. My local node version is 16.14.0 My local nextjs version is 12.x In my next.config.js file, the only thing w ...

Error in Deno pooling map server due to unhandled AggregateError

I am trying to run this TypeScript code snippet import { serve } from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb989f8d9cdbc5dbd9dac5db">[email protected]</a>/http/server.ts" imp ...

Error in TypeScript: Circular reference in type alias 'Argument' in node_modules/classnames/index.d.ts at line 13:13

Need help troubleshooting an error while building my project. Can't find much information online to resolve this issue. I am using typescript 4.2.4 I can't locate the classnames/index.d.ts file in any directory, so I'm unable to make any ch ...

Inject an asynchronous callback into the constructor of a class by leveraging TypeScript and Node with Passport integration

Currently, I am utilizing the passport-http authentication library. The issue at hand is that its documentation makes use of callbacks while my implementation involves TypeScript classes with async/await functionalities, thus causing uncertainty regarding ...

Unable to determine the data type of the property within the table object

Is it feasible to retrieve the type of object property when that object is nested within a table structure? Take a look at this playground. function table<ROW extends object, K extends Extract<keyof ROW, string>>({ columns, data, }: { col ...

What is the best way to pass dynamic values to a service constructor from a component?

After days of attempting to grasp 'the Angular paradigm', I still find myself struggling to understand something about services that are not singletons. It seems impossible for me to pass a runtime-determined value to a service constructor, as I ...

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

My React component uses Material-UI (MUI) and I'm working on making it mobile responsive. Here's how it looks currently: https://i.sstatic.net/kxsSD.png But this is the look I want to achieve: https://i.sstatic.net/kJC2m.png Below is the code ...

The message states that the variable "Chart" has not been defined

I have been attempting to integrate ChartJS with Angular2, but I keep encountering an error message stating that 'Chart is not defined'. I made sure to install the ChartJS typings and referenced them accordingly. Additionally, I included the char ...

Why does the page I navigate from always trigger loading?

I am currently working on a web application using Next.js 13 with app routing. The issue I'm encountering is that when transitioning from the /projects page to the /projects/:id/edit page, it triggers loading events for both pages. However, I would li ...