Middleware redirection not working after upgrading to v12.2.5

[saubhagya23]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Enterprise
Binaries:
Node: 16.14.0
npm: 8.5.2
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.2.6-canary.0
eslint-config-next: 12.2.5
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome and Edge, all up to date

How are you deploying your application? (if relevant)

npx nx serve ui

Describe the Bug

When executing the application, the root '/' is to be redirected to '/landing'. Earlier we were using next v12.0.7 and had placed the _middleware.js inside the /pages folder.
The middleware was working fine before I upgrade my Next version to the 12.2.x.

After upgrading next to v12.2.5, we placed the middleware.js file in the root next to pages folder. Now we are not able to get the paths and it gives syntaxErrors regarding the same.

//-- middleware code start
// the console.log is here just as a test, more info on the print below

console.log('request-->', request);
const { pathname } = request.nextUrl
    if (pathname == '/') {
        return NextResponse.rewrite('/landing')
    }
    return NextResponse.next()
}

//-- middleware code end

If I comment out or exclude the middleware, the error stop, but the route doesnot change accordingly. It should redirect the page everytime root '/' is hit.

Also, this is what is the console.log('request-->', request) gives:
//--- request console.log start

{ cookies: {},
  geo: {},
  ip: undefined,
  nextUrl:
   { href: 'http://undefined:4200/_next/static/development/_devMiddlewareManifest.json',
     origin: 'http://undefined:4200',
     protocol: 'http:',
     username: '',
     password: '',
     host: 'undefined:4200',
     hostname: 'undefined',
     port: '4200',
     pathname: '/_next/static/development/_devMiddlewareManifest.json',
     search: '',
     searchParams: { [Symbol(impl)]: { _list: [], _url: [Object], [Symbol(wrapper)]: [Circular] } },
     hash: '' },
  url: 'http://undefined:4200/_next/static/development/_devMiddlewareManifest.json',
  bodyUsed: false,
  cache: 'default',
  credentials: 'same-origin',
  destination: '',
  headers:
   { accept: '*/*',
     accept-encoding: 'gzip, deflate, br',
     accept-language: 'en-US,en;q=0.9',
     connection: 'keep-alive',
     host: 'localhost:4200',
     referer: 'http://localhost:4200/',
   } }

//--- request console.log end

Expected Behavior

I need the middleware to redirect to page /landing whenever '/' is called.

Link to reproduction

Can't publicly share the repo as it is a company project.

To Reproduce

Can't publicly share the repo as it is a company project. Will share any other information if needed.

[ornakash]

Same here

[awareness481]

Running your example I get this error https://nextjs.org/docs/messages/middleware-relative-urls

There are some examples how to get around having to use an absolute url.

[saubhagya23]

@awareness481 I tried the solutions mentioned in https://nextjs.org/docs/messages/middleware-relative-urls but it didn't work.

Tried rewrite() method like this as well:

// code snippet start

  const url = request.nextUrl.clone();
  const { pathname, origin } = url;
  if (url.pathname == '/') {
    return NextResponse.rewrite(`${origin}/landing`)
  }
  return NextResponse.next()

// code snippet end

But getting origin: 'http://undefined:4200' rather than origin: 'http://localhost:4200' which is why I think this is not working.

[jscastanos]

I got the same error.

when providing a relative url NextResponse.rewrite(/landing), I'm getting URLs is malformed. Please use only absolute URLs

but If i provide an absolute URL NextResponse.rewrite(new URL(/landing, request.url)), I'm still getting an error TypeError [ERR_INVALID_URL]: Invalid URL (I followed the docs here https://nextjs.org/docs/messages/middleware-relative-urls)

BTW to get the localhost to not return undefined, i did this

 const url = request.nextUrl.clone()
 url.host = request.headers.get('host')

[awareness481]

I got the same error.

when providing a relative url NextResponse.rewrite(/landing), I'm getting URLs is malformed. Please use only absolute URLs

but If i provide an absolute URL NextResponse.rewrite(new URL(/landing, request.url)), I'm still getting an error TypeError [ERR_INVALID_URL]: Invalid URL (I followed the docs here https://nextjs.org/docs/messages/middleware-relative-urls)

BTW to get the localhost to not return undefined, i did this

 const url = request.nextUrl.clone()
 url.host = request.headers.get('host')

I can't reproduce using that exact code you wrote above (NextResponse.rewrite(new URL(/landing, request.url))). Please provide a complete reproduction, otherwise this is almost impossible to debug.

[PodStuart]

I'm seeing the same problem using NextAuth.js middleware. I tried to recreate a minimal example but couldn't reproduce the same problem. Eventually realised this was only failing when I was running my dev server (using Nx). I found that adding "hostname": "localhost" to my Nx project.json file fixed the problem.

[jscastanos]

@PodStuart thank you so much. its working

[balazsorban44]

This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.