Summary

If Issue Tracker is accessed from a safari browser (of version < 17) the Issue status filter is broken & hence would not filter the issues by their status, neither sort them by a particular column.

Why is this happening?
Inside the callback method of Issue Status Filter's onValueChange, the size property is used to check if there are any Url search params or not.

As per the usage table of browser versions globally by caniuse.com only 16% of users have Safari version 17 & above, rest of the users are using version 16 or below.

In short, there is a lack of browser support for this property on current & older safari browsers, causing potential issues for those who try to access this Issue Tracker on their Safari.

Proposed solution

The proposed solution is to use this code:

        const query = Array.from(params.size).length ? '?' + params.toString() : '';
        router.push('/issues/list' + query);

Or we could just call the toString() method first & only router push if string isn't a falsey value.

And then give a advisory to students on this lecture's description https://members.codewithmosh.com/courses/nextjs-projects-issue-tracker/lectures/49642661 to modify their code if the Issue Status Filter is not working on their browser.

Thank you if you consider this proposal.
@mosh-hamedani

I learned next.js from this course Thank you. What i have learned in this course now I'm able to build and create my own applications, I'm now working on a open source projects inspire by many, one of them is this project manager please check it out. and give me your review. I put everything in it what i have learned from you. :) your comment on it will make my day. 👍

mosh, as per the Prisma schema I made the updation in it, though I am not able to have a session in the app , after going through the data grip as well the other DB tables are populated such as User db table and Account db Table there is no value in session db table due to which if try to signup with google Oauth services, the users is perfectly authenticated but i can't see the session going on.

PLEASE GUIDE ME TO RESOLVE THIS ISSUE

Typing any params(string) after
https://issue-tracker-pied.vercel.app/issues/
sends unnecessary fetch request to database resulting runtime error as intParse fails in

app\issues[id]\page.tsx
fetchUser(parseInt(params.id));

Simple solution: Check before database call

export async function generateMetadata({ params }: Props) {
  if (isNaN(parseInt(params.id))) notFound();
  const issue = await fetchUser(parseInt(params.id));

Have you used free service to host mysql DB?
And is there any reason to choose SQL over NO-SQL like MongoDB ?

Currently, there is no option to change the status of the issue, It would be nice if we include the option to change the issue status.

I encountered an issue while attempting to sign in using my Google account via the login popup. The problem occurred after selecting one of my Google accounts, and I received the following error message: "Try signing in with a different account."

This starts with creating the next.js project . Enter the terminal and navigate to where you want to create the project . And type npx [email protected].

Error: spawn UNKNOWN
at ChildProcess.spawn (node:internal/child_process:421:11)
at Object.spawn (node:child_process:761:9)
at spawn (C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:8:83670)
at C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:74:33779
at new Promise ()
at install (C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:74:33159)
at installTemplate (C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:74:38670)
at async createApp (C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:74:41469)
at async run (C:\Users\RICHARD CONDUAH\AppData\Local\npm-cache_npx\3c25916de7007719\node_modules\create-next-app\dist\index.js:74:50475) {
errno: -4094,
code: 'UNKNOWN',
syscall: 'spawn'

The page is redirected on form submission without going to the catch block. But, in the backend, I am getting the following error: the API body is not being executed.

For me, the Error does not go on server restart.

`"use client";
import { Button, TextField } from "@radix-ui/themes";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { useForm, Controller } from "react-hook-form";
import axios from "axios";
import { useRouter } from "next/navigation";

interface IssueInterface {
title: string;
description: string;
}

const NewIssue = () => {
const router = useRouter();
const { register, control, handleSubmit } = useForm();
return (
<form
className=" max-w-xl space-y-3"
onSubmit={handleSubmit(async (data) => {
try {
await axios.post("/issues/new", data);
router.push("/issues");
} catch (error) {
console.log(error);
}
})}
>
<TextField.Root>
<TextField.Input placeholder="Title" {...register("title")} />
</TextField.Root>
<Controller
name="description"
control={control}
render={({ field }) => (
<SimpleMDE placeholder="Description" {...field} />
)}
/>
Create Issue

);
};

export default NewIssue;`

After I deploy issue-tracker on vercel, when I keep refreshing on list page/ issue detail page, I will get an error

Application error: a client-side exception has occurred (see the browser console for more information).

Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

this error does not happed when I run npm run dev or npm run start

This is the error message I found in logs

This works fine in development stage

I tried many solutions as checking code and creating migration again but it didn't worked. Please help me fix this.

const updatedIssue = await prisma.issue.update({
where: { id: issue.id },
data: {
title,
description,
assignedToUserId,
},
});

Object literal may only specify known properties, and 'assignedToUserId' does not exist in type '(Without<IssueUpdateInput, IssueUncheckedUpdateInput> & IssueUncheckedUpdateInput) | (Without<...> & IssueUpdateInput)'.ts(2353)
index.d.ts(2083, 5): The expected type comes from property 'data' which is declared here on type '{ select?: IssueSelect | null | undefined; data: (Without<IssueUpdateInput, IssueUncheckedUpdateInput> & IssueUncheckedUpdateInput) | (Without<...> & IssueUpdateInput); where: IssueWhereUniqueInput; }'