adrianhajdin / zoom-clone

Learn to develop a professional enterprise-ready video conferencing app in hours using Next.js 14, Stream, and Tailwind CSS.
https://jsmastery.pro
980 stars 336 forks source link

createRouteMatcher' is not exported from '@clerk/nextjs/server' (imported as 'createRouteMatcher'). #5

Closed Aashish1009 closed 7 months ago

Aashish1009 commented 7 months ago

Attempted import error: 'createRouteMatcher' is not exported from '@clerk/nextjs/server' (imported as 'createRouteMatcher').

./middleware.ts Attempted import error: 'clerkMiddleware' is not exported from '@clerk/nextjs/server' (imported as 'clerkMiddleware').

it's showing it has no such modules to export.

getFrontend commented 7 months ago

The router should be imported as import { useRouter } from "next/navigation", and then there will be no errors in Next 14

ComissarLetlev commented 7 months ago

The router should be imported as import { useRouter } from "next/navigation", and then there will be no errors in Next 14

can we give the code could not understand where i have to put up import { useRouter } from "next/navigation"

ComissarLetlev commented 7 months ago

Attempted import error: 'createRouteMatcher' is not exported from '@clerk/nextjs/server' (imported as 'createRouteMatcher').

./middleware.ts Attempted import error: 'clerkMiddleware' is not exported from '@clerk/nextjs/server' (imported as 'clerkMiddleware').

it's showing it has no such modules to export.

just update the clerk version beta 5 , worked for me

getFrontend commented 7 months ago

Affirmative, if we're talking about middleware.ts and the entry that Adrian suggested in the lesson

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const protectedRoutes = createRouteMatcher([
]);

export default clerkMiddleware((auth, req) => {
  if (protectedRoutes(req)) auth().protect();
});

Then you need to use the 5th beta version exclusively, e.g. "@clerk/nextjs": "^5.0.0.0-beta.35", or "@clerk/nextjs": "^5.0.0.0-beta.38",

Otherwise, errors with the Clerk will fly out...

Madhannmady07 commented 7 months ago

i couldn't able to figure out this same error , can someone tell me how to install "Clerk Version 5" ? or how to solve this error , bcuz in the video he was using a different way (i mean diff middleware.ts file ) and now it is showing authMiddleware ... this stresses me up , someone help me

getFrontend commented 7 months ago

i couldn't able to figure out this same error , can someone tell me how to install "Clerk Version 5" ? or how to solve this error , bcuz in the video he was using a different way (i mean diff middleware.ts file ) and now it is showing authMiddleware ... this stresses me up , someone help men

npm install @clerk/nextjs@beta

Or just manually specify the desired version in package.json and write npm i (don't forget to delete the node_modules folder if you have already initialized the project)

Madhannmady07 commented 7 months ago

Thank

i couldn't able to figure out this same error , can someone tell me how to install "Clerk Version 5" ? or how to solve this error , bcuz in the video he was using a different way (i mean diff middleware.ts file ) and now it is showing authMiddleware ... this stresses me up , someone help men

npm install @clerk/nextjs@beta

Or just manually specify the desired version in package.json and write npm i (don't forget to delete the node_modules folder if you have already initialized the project)

Thank you man , shouid i just simply mention like this : "@clerk/nextjs": "^5.0.0.0-beta.38" ? in the json file ? and execute npm i ? , im just new , so only im asking this much doubts

Madhannmady07 commented 7 months ago

or can u actually share me ur middleware.ts file for reference ? it could help me i guess? the clerk had updated i think so , there is a lot of confusions

getFrontend commented 7 months ago

middleware.ts

Yes, you can write the command in the config by yourself, or check out middleware.ts in my repository if needed )

Madhannmady07 commented 7 months ago

I have tried with your file and it seems to work , but while signing in using clerk , i was given with an page saying that ,"localhost redirected you too many times?" what should i do now brother ?

first it shows me like this ....

Screenshot 2024-04-06 075750

after 2 sec , it shows me like this ...

Screenshot 2024-04-06 074309

what is the issue here ? why i was redirected so many times ?and automatically reloaded again? i dont knw what is happening here? can anyone help me ?>

Madhannmady07 commented 7 months ago

never mind , I solved the issue , seems like my system's clock is not exact with the internet's , so yeah thank u everyone

kunalborkar2001 commented 7 months ago

Its Out dated just. Use middleware.js from my repo and please give a star 🌟

iNezerr commented 7 months ago

So the solution is to use npm install @clerk/nextjs@beta then use this middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const protectedRoute = createRouteMatcher([
  '/',
  '/upcoming',
  '/meeting(.*)',
  '/previous',
  '/recordings',
  '/personal-room',
]);

export default clerkMiddleware((auth, req) => {
  if (protectedRoute(req)) auth().protect();
});

export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

It works nicely. @Aashish1009 You can close the issue now