unable to compile the NextJS project

While my code runs smoothly in development mode, I encounter issues when building it for production. Here is the snippet of code:

import React, {KeyboardEvent} from 'react'

interface InputProps{
    name: string,
    id: string,
    placeholder: string,
    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;       
}


const Input = (props: InputProps) => {
    const {name, id, placeholder, onKeyDown} = props

    return (
        <input name={name} id={id} placeholder={placeholder} onKeyDown={onKeyDown} type="text" className="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required/>
    )
}

export default Input

The error message states:

Type error: Type 'OmitWithTag<InputProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'name' is incompatible with index signature.
    Type 'string' is not assignable to type 'never'.

I had anticipated that my code would function properly in a production environment.

Answer №1

import React, { KeyboardEvent } from 'react';

interface FormInputProps {
   label: string;
   id: string;
   placeholderText: string;
   onKeyPress?: (event: KeyboardEvent<HTMLInputElement>) => void;       
}

const FormInput: React.FC<FormInputProps> = ({ label, id, placeholderText, onKeyPress }) 
=> {
return (
<input 
  label={label} 
  id={id} 
  placeholder={placeholderText} 
  onKeyDown={onKeyPress} 
  type="text" 
  className="bg-gray-50 border border-gray-400 text-gray-900 text-sm 
rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" 
  required
/>
  );
 };

 export default FormInput;

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 the world of Ionic 2: uncovering its public variables

I'm facing an issue with Ionic 2, specifically with Angular. My concern revolves around a variable called "isConnected". I am unable to access it from an internal function within a function as it gives me an error saying "can't define property of ...

Show real-time data using Angular6 and GoogleChart

In my project, I am utilizing Angular Cli6, angularfire2, and Firebase to create a timeline using GoogleChart. //GoogleChart.service declare var google: any; export class GoogleChartsBaseService { constructor() { google.charts.load('current&apo ...

Steps for dynamically loading mui icons from mui with TypeScript

Is it possible to dynamically load MUI icons based on a string parameter using the following code snippet? import Icon from "@mui/icons-material" import SvgIcon from '@mui/material/SvgIcon'; const IconComponent = (props: typeof SvgIco ...

Leverage C# model classes within your Angular application

Just wanted to express my gratitude in advance import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-fetch-data', templateUrl: './fetch-data. ...

What is the best way to prevent the output folder from appearing in the import statements for users of my package?

I have a project written in Typescript that consists of multiple .d.ts files. I would like to package this project as an npm module and utilize it in another project. In the second project, my goal is to be able to import modules like so: import {Foo} fr ...

Transferring documents from an angular ionic application to a slim php framework on the localhost

Hey there! I've got a project on my localhost where I need to upload files to a local folder. I'm sharing the code here in hopes that someone can assist me. HTML: <ion-item ion-item *ngFor="let item of lista" menuClose> Floor: ...

Unable to extract the 'data' property from an undefined source in React, causing an error

I encountered this error message: TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined. export const getServerSideProps: GetServerSideProps = async () => { // categories const { data: categor ...

The Admin Panel shows a blank page with an unexpected token 'lt' error appearing at runtime in the main JavaScript file

Currently, my setup includes Strapi as the backend and Next.js as the frontend both served from the same domain. To achieve this, I followed the "Subfolder unified" nginx configuration outlined in the Strapi documentation (Nginx Proxying | Strapi Documenta ...

Innovative approaches to enhancing Feathers services through the use of relational data in design patterns

I'm in the process of developing a straightforward application that involves a one-to-many relationship between data entities. Specifically, I am working with feathers js and sequelize (utilizing sqlite) to create a system where each site can have mul ...

Changes made to the source files in Webpack dev server combined with React and Typescript are not being successfully

I'm embarking on a new project to develop a small app using React, TypeScript, and Webpack for building. I found this helpful article to guide me through the process: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html All the proje ...

Angular 7 error: Form control with name property does not have a valid value accessor

Currently, I am utilizing angular 7 and have a parent and child component set up as demonstrated in the Stackblitz link provided below. Strangely enough, when I assign the formControlName from the child component using "id", everything functions flawlessly ...

Implementing the handling of multiple button events in a ListView through onclick function

Currently, I have a listview with three buttons that need to trigger the same method checkInstall on multiple button clicks. However, I am unsure of how to achieve this. Below is the relevant code snippet: html file: <ListView [items]="allAppsList" c ...

Retrieve the name from the accordion that was clicked

Hey there, I have a simple accordion that is based on an API called "names". <div *ngFor="let item of showDirNames | async | filter: name; let i = index;"> <button class="accordion" (click)="toggleAccordian($event, i)&q ...

Collision Detection in Kendo UI Menu

When working with TypeScript, it ensures that the parameters are of the correct type. For Kendo's menu, in order to disable the popupCollision property, you need to set it to false. However, this property actually accepts a string as its value, so if ...

I'm experiencing a challenge with Next.js where I am unable to use return within

My code was functioning properly with if-else statements in run dev, but encountered issues when running build. The if-else statements stopped working, prompting me to explore alternative ways of conditionally rendering a page. A new approach seemed promis ...

React Hooks have been utilized to update the state without triggering a re-render

Creating a UI to display NFT results obtained using the Alchemy SDK is my current project. The default collection of NFTs is currently displayed with getServerSideProps, passing the API call result as props to the main Home component. My application struct ...

Angular: The fetched data from the API is coming back as undefined

I am trying to use the Highcharts module in Angular to build a chart. The data object needed for the chart is provided by an API, and this is the structure of the object: { "success": true, "activity": [ { &q ...

Encountering errors when examining local variables during unit testing on an Angular component

If we have 2 components, namely AppComponent and TestComponent. The TestComponent is being called using its directive in the HTML template of the AppComponent. Within the TestComponent, there is an @Input() property named myTitle. Unit testing is being pe ...

Step-by-step guide on deploying your Nestjs API on Google App Engine

Encountering a hurdle while trying to deploy my nestjs api on Google App Engine has left me puzzled. Despite initializing my google cloud project with the google sdk, an error thwarted my progress. To tackle this challenge, I made key adjustments in my cod ...

How can I subscribe to nested JSON objects in Angular?

I am seeking advice on working with a nested JSON object. Within our server, there is an object located at "/dev/api/sportstypes/2" structured like this; { "NBA": { "link": "https://www.nba.com/", "ticketPrice": 50 }, "UEFA": { ...