OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Next.js - error TypeError: Cannot redefine property: $$id

  • Thread starter Thread starter Dan Rubio
  • Start date Start date
D

Dan Rubio

Guest
I am working on a Next.js tutorial following along with a youtube video. This is a clone of Facebook Threads that I am working towards to learn Next.js. For the part of creating a thread a.k.a. (simple post). I get this 500 error from the application:

Code:
- error node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-proxy.js (37:11) @ defineProperties
- error TypeError: Cannot redefine property: $$id
    at Function.defineProperties (<anonymous>)
    at eval (./lib/actions/thread.actions.ts:43:81)
    at (actionBrowser)/./lib/actions/thread.actions.ts (/Users/danielrubio/Desktop/threads/.next/server/app/(root)/create-thread/page.js:3366:1)
    at Function.__webpack_require__ (/Users/danielrubio/Desktop/threads/.next/server/webpack-runtime.js:33:42)
null

I can see from the output that the culprit is line 43 of thread.actions.ts. However, I don't have a line 43 in that file. Below is the file in full:

Code:
'use server'

import User from "../models/user.model";
import Thread from "../models/thread.model";
import { connectToDB } from "../mongoose";
import { revalidatePath } from "next/cache";


interface Params {
  text: string,
  author: string,
  communityId: string | null,
  path: string,
}

export async function createThread({text, author, communityId, path} :Params) {
  try {
    connectToDB();

    const createdThread = await Thread.create({
      text,
      author,
      community: null,
    })
  
    await User.findByIdAndUpdate(author, {
      $push: { threads: createdThread._id }
    })
  
    revalidatePath(path);
  } catch(error: any) {
    throw new Error(`Failed to create thread: ${error.message}`);
  }
 
}

export default createThread;

The file only contains 37 lines so I don't know what could be causing this error. From previous work with React, I am thinking this is some kind of TypeScript error but I'm not sure.

Below is the model for a thread:

Code:
import mongoose from 'mongoose';

const threadSchema = new mongoose.Schema({
  text: { type: String, required: true },
  author: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
    required: true
  },
  community: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Community'
  },
  createdAt: {
    type: Date,
    default: Date.now
  },
  parentId: {
    type: String
  },
  children: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Thread'
    }
  ]
  
})

const Thread = mongoose.models.Thread || mongoose.model('Thread', threadSchema);

export default Thread;

And here is the Form that I am rendering to create a thread:

Code:
'use client'

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '../ui/button';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"

import { ThreadValidation } from '@/lib/validations/thread';
import createThread from '@/lib/actions/thread.actions';

interface Props {
  userId: string;
}

function PostThread({ userId }: Props ) {
  const router = useRouter();
  const pathname = usePathname();

  const form = useForm({
    resolver: zodResolver(ThreadValidation), 
    defaultValues: {
      threads: '',
      accountId: userId,
    }
  })
  
  const onSubmit = async (values: z.infer<typeof ThreadValidation>) => {
    await createThread({
      text: values.thread,
      author: userId,
      communityId: null,
      path: pathname

    })

    router.push('/')
  }

  return(
    <Form {...form}>
      <form
        className='flex flex-col justify-start gap-10'
        onSubmit={form.handleSubmit(onSubmit)}
      >
  
        <FormField
          control={form.control}
          name='thread'
          render={({ field }) => (
            <FormItem className='flex w-full flex-col gap-3'>
              <FormLabel className='text-base-semibold text-light-2'>
                Content
              </FormLabel>
              <FormControl className='no-focus border border-dark-4 bg-dark-3 text-light-1'>
                <Textarea
                  rows={15}
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
    
        <Button type='submit' className='bg-primary-500'>
          Post Thread
        </Button>
      </form>
    </Form>
  )
  
}

export default PostThread;

I am completely new to Next.js so Im having a little bit of a difficult time understanding what this error could mean. If there is anyone that could help me understand how to troubleshoot this, I would appreciate it.

<p>I am working on a Next.js tutorial following along with a youtube video. This is a clone of Facebook Threads that I am working towards to learn Next.js. For the part of creating a thread a.k.a. (simple post). I get this 500 error from the application:</p>
<pre><code>- error node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-proxy.js (37:11) @ defineProperties
- error TypeError: Cannot redefine property: $$id
at Function.defineProperties (<anonymous>)
at eval (./lib/actions/thread.actions.ts:43:81)
at (actionBrowser)/./lib/actions/thread.actions.ts (/Users/danielrubio/Desktop/threads/.next/server/app/(root)/create-thread/page.js:3366:1)
at Function.__webpack_require__ (/Users/danielrubio/Desktop/threads/.next/server/webpack-runtime.js:33:42)
null
</code></pre>
<p>I can see from the output that the culprit is line 43 of <code>thread.actions.ts</code>. However, I don't have a line 43 in that file. Below is the file in full:</p>
<pre><code>'use server'

import User from "../models/user.model";
import Thread from "../models/thread.model";
import { connectToDB } from "../mongoose";
import { revalidatePath } from "next/cache";


interface Params {
text: string,
author: string,
communityId: string | null,
path: string,
}

export async function createThread({text, author, communityId, path} :Params) {
try {
connectToDB();

const createdThread = await Thread.create({
text,
author,
community: null,
})

await User.findByIdAndUpdate(author, {
$push: { threads: createdThread._id }
})

revalidatePath(path);
} catch(error: any) {
throw new Error(`Failed to create thread: ${error.message}`);
}

}

export default createThread;
</code></pre>
<p>The file only contains 37 lines so I don't know what could be causing this error. From previous work with React, I am thinking this is some kind of TypeScript error but I'm not sure.</p>
<p>Below is the model for a thread:</p>
<pre><code>import mongoose from 'mongoose';

const threadSchema = new mongoose.Schema({
text: { type: String, required: true },
author: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true
},
community: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Community'
},
createdAt: {
type: Date,
default: Date.now
},
parentId: {
type: String
},
children: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Thread'
}
]

})

const Thread = mongoose.models.Thread || mongoose.model('Thread', threadSchema);

export default Thread;
</code></pre>
<p>And here is the Form that I am rendering to create a thread:</p>
<pre><code>'use client'

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '../ui/button';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"

import { ThreadValidation } from '@/lib/validations/thread';
import createThread from '@/lib/actions/thread.actions';

interface Props {
userId: string;
}

function PostThread({ userId }: Props ) {
const router = useRouter();
const pathname = usePathname();

const form = useForm({
resolver: zodResolver(ThreadValidation),
defaultValues: {
threads: '',
accountId: userId,
}
})

const onSubmit = async (values: z.infer<typeof ThreadValidation>) => {
await createThread({
text: values.thread,
author: userId,
communityId: null,
path: pathname

})

router.push('/')
}

return(
<Form {...form}>
<form
className='flex flex-col justify-start gap-10'
onSubmit={form.handleSubmit(onSubmit)}
>

<FormField
control={form.control}
name='thread'
render={({ field }) => (
<FormItem className='flex w-full flex-col gap-3'>
<FormLabel className='text-base-semibold text-light-2'>
Content
</FormLabel>
<FormControl className='no-focus border border-dark-4 bg-dark-3 text-light-1'>
<Textarea
rows={15}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<Button type='submit' className='bg-primary-500'>
Post Thread
</Button>
</form>
</Form>
)

}

export default PostThread;
</code></pre>
<p>I am completely new to Next.js so Im having a little bit of a difficult time understanding what this error could mean. If there is anyone that could help me understand how to troubleshoot this, I would appreciate it.</p>
 
Top