antonioerdeljac / next13-messenger Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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
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(
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?
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}
Cool
This project is great. Do you support i18n?
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
"
/>
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
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
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
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.
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?
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.
But in development it works all just find. This is in spite of whitelisting the domains in nextConfig.js
NOT sure how to come.
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")
Thanks always for bringing great content , but it seems the callback url is not updated with the deploy version on vercel.
nevermind -- my mistake -- you can ignore
At Sidebar.tsx component, when i'm importing the function getCurrentUser() and pass the currentUser into DesktopSidebar, this error show up
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.
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.
, "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"]
}
mkdir pages
Source: vercel/next.js#43141
Any other workarounds?
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.