vercel / vercel/next.js

Middleware config does not work with grouped export statement

Open
#56,451 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Runtime
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/jplwood/next13-middleware-export-issue/blob/main/src/middleware.ts

To Reproduce

As a matter of preference , we enforce having a single export for any given file's named exports (my org has lint rules around this, see import/group-exports). i.e.,

// this 
const a = 1;
const b = 2;
export { a, b }

// not this
export const a = 1;
export const b = 2;

In Next.js Middlewares, if you attempt to do this, the Middleware config is not applied. For example, this works:

export const middleware = async (req: NextRequest) => {
  console.log(`MIDDLEWARE: `, req.url);
  return NextResponse.next();
};

export const config = {
  //prettier-ignore
  matcher: ["/((?!_next/static|_next/image|.*\.ico|.*\.svg).*)"],
};

with Console output:

MIDDLEWARE:  http://localhost:3000/

Whereas this does not work, config is not applied:

const middleware = async (req: NextRequest) => {
  console.log(`MIDDLEWARE: `, req.url);
  return NextResponse.next();
};

const config = {
  matcher: ["/((?!_next/static|_next/image|.*.ico|.*.svg).*)"],
};

export { middleware, config };

with Console output:

MIDDLEWARE:  http://localhost:3000/
MIDDLEWARE:  http://localhost:3000/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2
MIDDLEWARE:  http://localhost:3000/_next/static/css/app/layout.css?v=1696457999436
MIDDLEWARE:  http://localhost:3000/_next/static/css/app/page.css?v=1696457999436
MIDDLEWARE:  http://localhost:3000/vercel.svg
MIDDLEWARE:  http://localhost:3000/next.svg
MIDDLEWARE:  http://localhost:3000/_next/static/chunks/webpack.js?v=1696457999436
MIDDLEWARE:  http://localhost:3000/_next/static/chunks/main-app.js?v=1696457999436
MIDDLEWARE:  http://localhost:3000/_next/static/chunks/app-pages-internals.js
MIDDLEWARE:  http://localhost:3000/_next/static/chunks/app/page.js
MIDDLEWARE:  http://localhost:3000/favicon.ico
Current vs. Expected behavior

I would expect any form of named exports would work with middleware config.

Verify canary release
  • I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:46 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6020
Binaries:
  Node: 18.15.0
  npm: 9.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.5-canary.2
  eslint-config-next: 13.5.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime)

Additional context

I've only tested this locally, but it occurs regardless if I do npm run dev or npm run build && npm start

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction in src/middleware.ts and compare the behavior of direct named exports with the grouped export statement. Run both npm run dev and npm run build && npm start, then verify that the matcher in config excludes the listed static assets when exports are grouped.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
api, backend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.