There is no assigned value in scope for the shorthand property. You must either declare one or provide an initializer

I'm just starting out with TypeScript.

Encountering the error 'No value exists in scope for the shorthand property 'firstName'. Either declare one or provide an initializer.' while using Prisma with Next.js to create a new user in my database.

The user model in schema.prisma:

model User {
  id            Int      @id @default(autoincrement())
  email         String   @unique
  firstName     String
  middleName    String?
  lastName      String
  dateOfBirth   DateTime
  mobileNumber  String   @unique
  idType        String
  idNumber      String   @unique
  idExpirtyDate DateTime
  idIssueState  DateTime
  streetAddress String
  suburb        String
  postCode      Int
  state         String
  bsb           Int      @unique
  accountNumber Int      @unique
  payIdType     String
  payId         String   @unique
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

The createUser() function looks like this:

export async function createUser(user: FormData) {
  const prisma = new PrismaClient()

  await prisma.user.create({
    data: {
      firstName,
      lastName,
      middleName,
      email,
      dateOfBirth,
      mobileNumber,
      idType,
      idNumber,
      idExpirtyDate,
      idIssueState,
      streetAdddress,
      suburb,
      postCode,
      state,
      bsb,
      accountNumber,
      payIdType,
      payId,
    },
  })
}

This is where I'm getting the FormData, from a component:

  async function handleFormData(userData: FormData) {
    'use server'
    await createUser(userData)
  }

Any assistance would be greatly appreciated.

Answer №1

The {firstName} shorthand is only effective when there exists a variable named firstName within scope, functioning essentially as {firstName: firstName}.

To access the parameters from the FormData, manual extraction is necessary.

data : {
    firstName: user.get('firstName'),
    // etc.
}

If preferred, all values from the FormData can be passed by converting it into an object using Object.fromEntries.

data: Object.fromEntries(user)

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

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

Why isn't the customer's name a part of the CFCustomerDetails class?

Currently, I am utilizing the cashfree-pg-sdk-nodejs SDK to integrate Cashfree payment gateway into my application. Upon examining their source code, I noticed that the CFCustomerDetails class does not include the customerName attribute. https://i.stack.i ...

How to incorporate a routing file within another routing file in Node.js

I have structured my routes as follows: / /business /business/stuff1 /business/stuff2 /business/admin For /business, I am using a separate file for the routing and functions. And similarly, for /business/admin, I also want to use a separate file f ...

Example of VPAID pre-roll ads

I've been searching for a VPAID code example to use in a sample preroll ad for quite some time now, but I haven't had any luck finding one. If anyone has a working example, could you please share it with me? Thank you! By the way, I am using vid ...

Organize arrays within arrays in Javascript

My array of data is structured for visualization as shown below: var Dataset1 = [ { "commentBy": "saurabh", "comment": "Testing", "datestamp": "07/07/2017", "weekcount": 1 }, { "commentBy": "raman", "comment": "Planning", ...

Encountering issues when implementing react-router with the client-side library

After following the author's suggestion, I've successfully loaded the client-side library. The recommended method is to simply drop a <script> tag in your page and use the UMD/global build hosted on cdnjs. I have ensured that ReactRouter i ...

Using socket.io and express for real-time communication with WebSockets

I'm currently working on implementing socket.io with express and I utilized the express generator. However, I am facing an issue where I cannot see any logs in the console. Prior to writing this, I followed the highly upvoted solution provided by G ...

Guide to Automatically Updating Angular Component When Service Data Changes

I am currently working on an Angular application that features a sidebar component displaying different menu items based on the user's data. The sidebar should only display an option for "Empresas" if the user has not created any company yet. Once a c ...

Displaying two distinct tables utilizing ng-repeat by employing customized directives

I'm facing an issue with a custom directive that generates tables and is appearing twice on my index page. The data for these tables comes from the $scope.globalrows variable. Even though globalrows contains 2 arrays, it always displays the second arr ...

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

The functionality of AJAX is hindered in the browser when attempting to fetch data from a URL

Lately, I've been encountering a strange issue when trying to fetch data from a URL. $.ajax({ url: 'URLHERE', dataType: 'html', success: function(data) { //function 2 var xml = $.parseXML(data) $(xml).find('StopLoca ...

Struggling with passing values to onClickHandler because of MUI

I'm looking to create a category navigation menu that includes icons and labels. I attempted to do this using Chips: {categories.map((category) => ( <Chip key={category._id} ...

Duplicate entries being saved in the database due to Ajax calls

I am currently utilizing Fullcalendar jQuery with PHP for managing events. I am making an AJAX call to add events, and while it works fine for the initial event entry after a page refresh, it starts creating duplicate events for subsequent entries. I am un ...

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

Deployment to Amazon Amplify encounters failure when using Next JS

I've been encountering continuous failures while trying to deploy an SSG app on Next JS. The build consistently fails, and I'm met with an error message. Despite following the deployment documentation for SSG sites on Amazon diligently, the error ...

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

Tips for handling alternate lines with two distinct styles in the Ace editor

I am looking to develop a unique note-taking editor using Ace. For instance, if I paste some Spanish text into the editor, I would like to add English words as notes for corresponding Spanish words. My goal is to display these English words above the resp ...

What is the best way to retrieve props for computed properties using Vue with Typescript?

Seeking help on accessing props data for my computed property. Here is the code snippet: <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { color: String, shape: String, ...

Webpack, TypeScript, and modules are set to "esnext," resulting in a change to undefined

In my setup, I am using webpack with typescript (via ts-loader). To enable code splitting in webpack, it is necessary to adjust the module setting to esnext in the tsconfig file: // tsconfig.json { "compilerOptions": { "module": ...

Transferring information to React (Native) hooks in a way similar to how it is done

Transitioning to Hooks in React Native has been a new learning curve for me, especially when it comes to passing data to child elements. In the past with class-based components, passing props was as simple as using XML-style syntax. A Simple Example using ...