NextJS 16, Sequelize 6.37, TypeScript 5, SQL issues

[Fred638]

Body

I posted a similar question on these issues, but decided to start a new discussion.

Issue 1: All required form fields are filled out, but output says: "... cannot insert NULL into..."
Issue 2: "Only plain objects can be passed to Client Components..." perhaps a date format conversion could be the reason?
Issue 3: "...Error: WHERE parameter "ID" has invalid "undefined" value

What I tried: Changed all model fields to uppercase (Oracle), removed the not null constraint - in this case the insert worked, but only the ID, CREATEDAT and UPDATEDAT fields were filled. I understand that the model must match the table columns in the database.

All affected form fields are UNDEFINED in the output.

Before posting the code maybe somebody knows already how to fix this?

Thanks!

Guidelines

• I have read and understood this category's guidelines before making this post.

[vladlen-codes]

Most likely the field name is mismatched, the fact that only ID, CREATEDAT, and UPDATEDAT get inserted (these are typically auto-generated) while all form fields come through as undefined strongly suggests your form field names don't match what your model/query expects. This is especially common with Oracle since column names are case-sensitive in how you define them in your ORM.

1. Log your form data before it hits the model:

console.log(req.body) // or however you're receiving form data

2. Check field name casing, If your Oracle columns are FIRSTNAME, LASTNAME etc., your model bindings need to match exactly, including case.

3. On the date issue (Issue 2), date objects aren't serializable as plain objects in some frameworks (e.g., Next.js Server/Client Components boundary). Convert dates to ISO strings before passing them:

date.toISOString() // instead of passing raw Date object

4. On the undefined ID (Issue 3), This usually means the record wasn't created yet when you're trying to reference its ID, or the ID isn't being returned/passed correctly after insert.

If this was helpful please mark it as answered. Thank you!

[KaweMaximo]

All three issues likely trace back to the same root cause: your form field values aren't reaching your Sequelize model. Here's how to diagnose each one:

Issue 1 — cannot insert NULL into...
The fields are undefined on insert, which means the data isn't being passed through correctly from your form submission. Most common culprits in a Next.js + Sequelize setup:

• You're using a Server Action or API route handler, and you're not calling formData.get('fieldName') correctly, or the name attributes in your JSX don't match what you're reading server-side
• You're passing a raw FormData object to Sequelize instead of extracting values first
• Your Sequelize model field names are camelCase but your Oracle columns are uppercase — Sequelize needs explicit field mappings for this:

// In your model definition
firstName: {
  type: DataTypes.STRING,
  field: 'FIRST_NAME' // maps camelCase to Oracle uppercase column
}

Issue 2 — Only plain objects can be passed to Client Components
This is almost certainly a Sequelize model instance being passed directly to a Client Component. Sequelize instances are class objects, not plain objects. Fix by serializing before passing:

const record = await MyModel.findOne({ where: { id } });
return <MyComponent data={record.toJSON()} />; // or: JSON.parse(JSON.stringify(record))

Dates specifically will also need conversion since Date objects aren't serializable across the server/client boundary — convert to .toISOString() before passing.

Issue 3 — WHERE parameter "ID" has invalid "undefined" value
The id you're passing into your query is undefined at the time the query runs. Common cause in Next.js: reading params.id from a dynamic route before it resolves, or accessing searchParams incorrectly. In Next.js 15+, both params and searchParams are now async and need to be awaited:

// Next.js 15+
const { id } = await params;

Posting your model definition and the route/action where the insert happens would help narrow it down further, but the above covers the most likely causes for each symptom.

[fzihak]

Hey Fred, these three issues are all connected to the same root cause — Sequelize isn't mapping your form fields to the correct Oracle column names. Let me go through each one.

---

The core problem: Oracle column name mapping in Sequelize

Oracle stores column names in uppercase by default. Sequelize doesn't handle this automatically, so you need to explicitly tell it which JavaScript field maps to which Oracle column using the field property in your model definition.

Without this, Sequelize silently fails to map the values — which is exactly why only ID, CREATEDAT, and UPDATEDAT are getting inserted (those are auto-handled) while everything else comes through as undefined.

Here's what your model should look like:

import { DataTypes, Model } from 'sequelize';

class YourModel extends Model {}

YourModel.init(
  {
    id: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true,
      field: 'ID',
    },
    firstName: {
      type: DataTypes.STRING,
      allowNull: false,
      field: 'FIRSTNAME',       // maps JS camelCase → Oracle uppercase
    },
    lastName: {
      type: DataTypes.STRING,
      allowNull: false,
      field: 'LASTNAME',
    },
    createdAt: {
      type: DataTypes.DATE,
      field: 'CREATEDAT',
    },
    updatedAt: {
      type: DataTypes.DATE,
      field: 'UPDATEDAT',
    },
  },
  {
    sequelize,
    tableName: 'YOUR_TABLE',    // Oracle table names are uppercase too
    timestamps: true,
  }
);

Once this is in place, all three issues should start making more sense.

---

Issue 1 — "Cannot insert NULL"

Before touching anything else, add this log right before your insert:

console.log('req.body:', req.body);
console.log('mapped fields:', {
  firstName: req.body.firstName,
  lastName: req.body.lastName,
  // add all your fields here
});

If the values show up in req.body but are undefined when mapped — the field names in your form don't match what Sequelize expects. Double check that your HTML form field name attributes exactly match the JavaScript property names in your model (camelCase side, not the Oracle column side).

---

Issue 2 — "Only plain objects can be passed to Client Components"

This is a Next.js serialization issue at the Server/Client boundary. Date objects can't be passed directly — convert them to ISO strings before returning from your server component or API route:

const record = await YourModel.findOne({ where: { id } });

return {
  ...record.toJSON(),
  createdAt: record.createdAt?.toISOString() ?? null,
  updatedAt: record.updatedAt?.toISOString() ?? null,
};

Then on the client side, convert back when needed:

const date = new Date(props.createdAt);

---

Issue 3 — WHERE parameter "ID" has invalid "undefined" value

This means the id you're passing into your query is undefined at runtime. Two most common reasons:

First, check how you're getting the ID — in Next.js 15+, route params are now async:

// Next.js 15+ — params is a Promise
const { id } = await params;

// older versions
const { id } = params;

Second, make sure the ID actually exists before running the query:

if (!id) {
  throw new Error('ID is missing');
}

const record = await YourModel.findOne({
  where: { id },
});

This prevents Sequelize from even attempting the query with an undefined value.

---

Start with fixing the model field mappings first — that's the root cause and fixing it will likely clear up most of the confusion across all three issues. If you're still seeing problems after that, share your current model definition and the relevant form code and we can pinpoint it from there.

[Fred638]

Thanks to all for your help!

@fzihak
After some testing, issue 1 & 3 still persist. The CRUD operations are being handled by a server action. Posting a part of the code:

Function in actions.ts:
export async function createTask(formData: FormData) { const title = formData.get('title') as string const description = formData.get('description') as string const priority = formData.get('priority') as string

The log shows undefined for those fields.

Form:
<input type="text" id="title" name="title"
same for other fields

Model (TypeScript):
`import { DataTypes, Model } from "sequelize";
import sequelize from "@/lib/sequelize/dbConnect";

class Task extends Model {
declare id: number;
declare title: string;
declare description: string;
declare completed: boolean;
declare priority: string;
declare createdAt: Date;
declare updatedAt: Date;
}

Task.init({
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: DataTypes.INTEGER,
field: 'ID'
},
title: {
type: DataTypes.STRING,
allowNull: false,
field: 'TITLE'
},
description: {
type: DataTypes.STRING,
allowNull: true,
field: 'DESCRIPTION'
},
completed: {
type: DataTypes.BOOLEAN,
field: 'COMPLETED'
},
priority: {
type: DataTypes.STRING,
allowNull: true,
field: 'PRIORITY'
},
createdAt: {
allowNull: false,
type: DataTypes.DATE,
field: 'CREATEDAT'
},
updatedAt: {
allowNull: false,
type: DataTypes.DATE,
field: 'UPDATEDAT'
}
}, {
sequelize,
modelName: 'Task',
tableName: 'TASK',
timestamps: true,
freezeTableName: true
})
export default Task;`

The field mappings appear to be ok.

What works: fetching all tasks (after data entered in the database for testing purposes), deleting a task via application.
What doesn't work: Creating or updating a task

Your explanations were clear, but I still can't pinpoint the problem.

Found and solved issue 1: I put the fields in a data object key, that's what the database was complaining about. After removing that the insert worked.

Task.create ({ data: { title: title.trim(), description: description?.trim() || null ..}}). Issue 3 should be easy to solve.

[fzihak]

Great catch on Issue 1 - that's a classic Prisma-to-Sequelize mixup. Task.create() takes the field values directly, no data wrapper needed.

For Issue 3, can you share your current updateTask action code and the form you're using to trigger it? Specifically:

1. How are you calling the action from the form? (<form action={...}> or a button onClick?)
2. How are you getting the id inside the action — formData.get('id'), route params, or something else?

Most likely one of two things is happening:

Case A - The id is missing from the form entirely:

// This returns null if there's no <input name="id"> in your form
const id = formData.get('id') // → null → Number(null) → 0 or NaN → Sequelize gets undefined

Fix: add a hidden input:

<input type="hidden" name="id" value={task.id} />

Case B - You're using .bind() but the argument order is wrong:

// WRONG - id ends up as formData
export async function updateTask(formData: FormData, id: number)

// CORRECT - bound args come first
export async function updateTask(id: number, formData: FormData)

Share the relevant code and I can pinpoint it exactly.

[ANOOPSONKRIYA]

If all the form fields are showing as undefined, the issue may not be the database model itself but how the data is being passed from the form to the server.

A few things to check:

1. Form data extraction
   Make sure the form values are actually being read correctly (for example using FormData or req.body). If the field names don't match the input name attributes, they will appear as undefined.

2. Client → Server serialization
   The error "Only plain objects can be passed to Client Components" usually happens when something like a Date, class instance, or complex object is passed directly. Try converting values before sending them (e.g. date.toISOString()).

3. Field name mismatch
   If you changed database columns to uppercase (Oracle), make sure the model and the form keys match exactly. A mismatch can cause fields to be undefined when building the insert query.

4. Debug the incoming payload
   Before inserting into the database, log the received data:

   console.log(formData)

[Fred638]

Once again, thanks to all for your input. After digging a little deeper I found the solution for issue 3:

The Sequelize update (upsert) method was not correctly implemented hence the error message. When updating:
... try { await Task.upsert({ id: id, title ... })... will get the id passed through the form to the function ... export async function updateTask(id: number, formData: FormData)..., no need for a where clause here.

On the issue with "Only plain objects can be passed to Client Components", I had to convert the task object to a string, like ... task={task.toJSON()} ...

All good now.