antonioerdeljac/next13-messenger

next13-messenger's Issues

Issue with not create user in the register.js

Registration Error: PrismaClientInitializationError:
Invalid prisma.user.create() invocation:

error: Error validating data source


db: the URL must start with the protocol mongo.
--> schema.prisma:10
|
9 | provider = "mongodb"
10 | url = env("DATABASE_URL")
|

Validation Error Count:

Pusher not updating after message post

nevermind -- my mistake -- you can ignore

Type 'UseFormRegisterReturn<string>' is not assignable to type 'ReactNode'.

https://youtu.be/PGPGcKBpAk8?list=PLMBfii-0liG_uCliODb_aUIuSley8awL_&t=2071

Images from cloudinary not working in production

Images from cloudinary or google user content / github are not working in production. There seems to be an extra '_next/image' that is being appended to the url by default.

ex:
https://slacky-chat.vercel.app/_next/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxY4AwK5BTGQ11WQMmkg2hiSk-feir4T8-Y_r0tpCvY%3Ds96-c&w=1200&q=75 400

But in development it works all just find. This is in spite of whitelisting the domains in nextConfig.js

NOT sure how to come.

callback url not updated to the vercel generated url

Thanks always for bringing great content , but it seems the callback url is not updated with the deploy version on vercel.

http://localhost:3000/?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch&state=nYBZwIZlGU5xeuyBeihyLdlM4PLuBAkndoyQWcpFSK8

usePathname only works in Client Components.

Unhandled Runtime Error
Error: usePathname only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

Source
app\api\hook\useRoutes.ts (9:30) @ usePathname

7 | 
 8 | const useRoutes = () => {
>  9 | const pathname = usePathname();
   |                            ^
10 | const { conversationId } = useConversation();
11 | 
12 | const routes = useMemo(

[Prod]: The production link is broken

Current link: https://next13-whatsapp.vercel.app/

Expected Behavior:

Home page

Current Behavior:

Follow your tutorial and 401 appears when you log in

Error in connector: Error creating a database connection. (Kind: An error occurred during DNS resolution: request timed out, labels: {})"

Adding `next-superjson-plugin` creating Error

Here I added the next-superjson-plugin to the project

And after that It started showing error

I have changed different versions of next and next-superjson-plugin but still it don't works

Here are the codes from different parts

from next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        appDir: true,
        swcPlugins: [["next-superjson-plugin", {}]]
    },
}

module.exports = nextConfig

and the package.json for the version check

   "next": "13.3.1",
    "next-auth": "^4.22.1",
    "next-superjson-plugin": "^0.5.8",
    "postcss": "8.4.24",

And here is the error that is coming out

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: failed to process failed to invoke plugin: failed to invoke plugin on 'Some("/Users/ashutoshhota/Coding/web development/Next JS/Ongoing Projects/Messenger Clone/Messenger Clone/Messenger-Clone/node_modules/next/dist/client/dev/amp-dev.js")'

Caused by:
0: failed to invoke /Users/ashutoshhota/Coding/web development/Next JS/Ongoing Projects/Messenger Clone/Messenger Clone/Messenger-Clone/node_modules/next-superjson-plugin/dist/next_superjson.wasm as js transform plugin at /Users/ashutoshhota/Coding/web development/Next JS/Ongoing Projects/Messenger Clone/Messenger Clone/Messenger-Clone/node_modules/next-superjson-plugin/dist/next_superjson.wasm
1: RuntimeError: unreachable
2: unreachable

Please Help

Fix and Question: middleware not redirecting to '/' (Next.js v13.4.1)

I might be encountering this problem because I enabled /src directory when I ran npx create-next-app@latest.

I encountered this problem at 2:06:52.
My npx next -v is Next.js v13.4.1

Here's how I fixed it.

1. In /tsconfig.json (under the project's root), add , "middleware.ts" inside the "include" array. Here's my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "middleware.ts"],
  "exclude": ["node_modules"]
}

2. Create /pages directory inside the project's root or inside /src. It can be empty.
   mkdir pages

Source: vercel/next.js#43141

Any other workarounds?

UserList map item issue

when I was trying to show users from userbox into userlist, i saw this error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'map')

Source:
app\users\components\UserList.tsx

42 |
43 |

44 | {items.map((item) => (
| ^
45 | <UserBox
46 | key={item.id}
47 | data={item}

Incorrect className in MessageBox component's Image component

Hi there,

I came across an issue with the MessageBox component in the app where the Image component has an incorrect className that causes styling issues. Here's the incorrect code:

<Image
  alt="Image"
  height="288"
  width="288"
  onClick={() => setImageModalOpen(true)} 
  src={data.image} 
  className="
    object-cover 
    cursor-pointer 
    hover:scale-110 
    transition 
    translate
  "
/>

The className includes an invalid translate class.

Here's the corrected code:

<Image
  alt="Image"
  height="288"
  width="288"
  onClick={() => setImageModalOpen(true)} 
  src={data.image} 
  className="
    object-cover 
    hover:scale-110 
    cursor-pointer 
    transition 
  "
/>

db must be mongo

Invalid `prisma.user.create()` invocation:


error: Error validating datasource `db`: the URL must start with the protocol `mongo`.
  -->  schema.prisma:10
   |
 9 |   provider = "mongodb"
10 |   url      = env("DATABASE_URL")

Unable to import User from @prisma/client.

In AuthForm when variant state changed then in page.tsx "sign in to your account" heading not changed.

Here under the (site) folder when we changed variant state in AuthForm component , according that state value in page.tsx "sign in to your account" should changed into another text, right?? e.g: "Create your account" .

But in app router page.tsx is server side and AuthForm is client side and i have to send variant state from AuthForm to page.tsx , How to do that? Cause if we have the variant state value then we can easily conditonally do this
{variant === "LOGIN"
? "Sign in to your account"
: "Create your account"
}.
Anyone have any suggestion, how to solve this little issue?

deployment error

Hi there!
I keep getting this issue during deployment. Can anyone suggest how to solve it?

Problem when I import the function getCurrentUser()

At Sidebar.tsx component, when i'm importing the function getCurrentUser() and pass the currentUser into DesktopSidebar, this error show up

and this error in browser

I don't know why this happen. I have try to switch to next version 13.4.5 but it work for a moment then the error happen again. I'm sure this cause problem for my side because when i remove this function the error disappears.

FullConversationType returning an Array with length of 0, in ConversationList.tsx

interface ConversationListProps {
initialItems: FullConversationType[];
users: User[];
}

const [items, setItems] = useState(initialItems);
console.log(initialItems);

this is the output in console
[]
length: 0
[[Prototype]]: Array(0)

31:56

I become an error

so I fixed it by installing again tailwindcss forms

.env is public

1:35:13

I tried restart vs code and reinstall dependencies using npm - useless

primsa does not support cascading deletes for many-to-many relationships

primsa does not support cascading deletes for many-to-many relationships, so although you delete the conversation, conversation ids and message ids also exit in User's seenMessageIds filelds and conversationIds fields

useEffect dependency issue in the useActiveChannel hook

Issues:

1. the active status is not pushed when a user logs in.
2. In the useActiveChannel hook, the channel should not be subscribed if a user is not authenticated.

Cause:

1. There is no session in the useEffect dependency array in useActiveChannel hook, so when a user logs in, the useEffect is not triggered.
2. The pusherClient subscribes to the channel whether the user is logged in or not.

My idea:

1. add session.status in the useEffect dependency array so the useEffect can be triggered when an user logs in.
2. add an if statement in the useEffect: if the user is not authenticated, then don't subscribe and return

Doesn't redirect to /conversations after logging in

The code works just fine in localhost but after deploying on vercel the /conversation or /user page is not redirected to on logging in.

And about the code, I copied everything from your tutorial

Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route.

URL in GitHub points to next13-whatsapp.vercel.app, not next13-messenger.vercel.app

Great project! I tried opening the demo link which only gives a 404. I'm assuming https://next13-messenger.vercel.app is the correct URL.

ImageModal image size problem

Hello,

If original size of image is bigger its not showing correctly uploaded image. I've tried to change width and height or div height and width properties it didnt work.

I dont have enough CSS knowledge to solve this :) Is there anything to do or maybe a sample css code?

Unhandled error 3:26:48

I just repeat code after you but have another result (I haven't errors in vs code)

https://youtu.be/PGPGcKBpAk8?list=PLMBfii-0liG_uCliODb_aUIuSley8awL_&t=12585
https://youtu.be/PGPGcKBpAk8?list=PLMBfii-0liG_uCliODb_aUIuSley8awL_&t=12409

Pusher Error: Getting a type error even when the api_key is string

TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be of type string or an instance of ArrayBuffer, Buffer, TypedArray, DataView, KeyObject, or CryptoKey. Received undefined

Whether i18n is supported

This project is great. Do you support i18n?

Antonio

Cool

error during deployment

I keep getting this error. If I remove the ts-expect-error then Sidebar compoent won't work, if I include the comment then I can't deploy... someone please help..