[V4] TS Global Middleware not picked up

[antokhio]

Bug report

Following from https://discord.com/channels/811989166782021633/1240319511857463429

Seems there is error in doc's or in the way the global middleware imported.
I try to follow steps from docs https://docs.strapi.io/dev-docs/backend-customization/middlewares to add global middleware and ran in to issue.

Required System information

• Node.js version: v18.18.2
• NPM version: 8.13.1
• Strapi version: 4.17.1
• Database: Postgres
• Operating system: windows 10 pro
• Is your project Javascript or Typescript: Typescript

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Add middleware to an empty project src/middlewares/test.ts

export default (config, { strapi }) => {
  return async (ctx, next) => {
    console.log('test');
    await next();
  };
};

2. Add middleware to config/middlewares.ts

export default [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  'global::test ',
];

3. Error:

Error: Middleware global::test  not found. 

Expected behavior

It should work

Additional context

$ strapi middlewares:list
┌─────────────────────────────────────┐
│ Name                                │
├─────────────────────────────────────┤
│ admin::rateLimit                    │
├─────────────────────────────────────┤
│ admin::data-transfer                │
├─────────────────────────────────────┤
│ global::test                        │
├─────────────────────────────────────┤
│ strapi::compression                 │
├─────────────────────────────────────┤
│ strapi::cors                        │
├─────────────────────────────────────┤
│ strapi::errors                      │
├─────────────────────────────────────┤
│ strapi::favicon                     │
├─────────────────────────────────────┤
│ strapi::ip                          │
├─────────────────────────────────────┤
│ strapi::logger                      │
├─────────────────────────────────────┤
│ strapi::poweredBy                   │
├─────────────────────────────────────┤
│ strapi::body                        │
├─────────────────────────────────────┤
│ strapi::query                       │
├─────────────────────────────────────┤
│ strapi::responseTime                │
├─────────────────────────────────────┤
│ strapi::responses                   │
├─────────────────────────────────────┤
│ strapi::security                    │
├─────────────────────────────────────┤
│ strapi::session                     │
├─────────────────────────────────────┤
│ strapi::public                      │
├─────────────────────────────────────┤
│ plugin::users-permissions.rateLimit │
└─────────────────────────────────────┘

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/plugin-middleware-setup-in-typescript/38366/6

[ksoltanidev]

Hey, I'm posting here the fix I found :

Firstly, there was no issue with the config/middleware.ts. The problem was in the plugin.

This does not work:
server/middlewares/redirect.ts

const redirect = async (ctx: any, next: any) => {
  console.log('MyMiddleware');
  await next();
};
export default redirect;

server/middleware/index.ts

import redirect from './redirect';

export default {
  redirect,
};

server/register.ts

import { Strapi } from '@strapi/strapi';
import middleware from './middlewares';

console.log(middleware.redirect) //This is undefined
export default ({ strapi }: { strapi: Strapi }) => {
  strapi.server.use(middleware.redirect); //registration fails
};

middleware.redirect is undefined, registration fails.

However, this is functional:
server/register.ts

import { Strapi } from '@strapi/strapi';

export default ({ strapi }: { strapi: Strapi }) => {
  strapi.server.use(async (ctx: any, next: any) => {
    console.log('MyMiddleware');
    await next();
  });
};

The way I found, which I don't know why (or more exactly, I don't understand why the other way does not work):

server/middlewares/redirect.ts

const redirect = () => async (ctx: any, next: any) => { //Redirect is now a function that returns the middleware.
  console.log('MyMiddleware');
  await next();
};
export default redirect;

server/middleware/index.ts

import redirect from './redirect';

export default {
  redirect,
};

server/register.ts

import { Strapi } from '@strapi/strapi';
import middleware from './middlewares';

console.log(middleware.redirect()) //This is not undefined anymore
export default ({ strapi }: { strapi: Strapi }) => {
  strapi.server.use(middleware.redirect()); //I call the function that returns my middleware and that works.
};

Can someone with dark magic experience give an explanation ? :)

[ksoltanidev]

Here is something weird again:
I needed the strapi and config objects in my middleware.

I tried to pass them to my middleware like this :

server/register.ts

import { Strapi } from '@strapi/strapi';
import middleware from './middlewares';

console.log(middleware.redirect()) //This is not undefined anymore
export default ({ strapi }: { strapi: Strapi }) => {
  strapi.server.use(middleware.redirect(strapi));

but that does not work.
My redirect.ts middleware gets nothing.
After some research, I saw that we are supposed to be able to retrieve them directly in the middleware like this :

server/middlewares/redirect.ts

const redirect = (config, { strapi }: { strapi: Strapi }) => async (ctx: any, next: any) => { //Redirect is now a function that returns the middleware.
  console.log('MyMiddleware');
  await next();
};
export default redirect;

So I did this, but since I'm calling my middleware function when registering it, I also added them there:

server/register.ts

import { Strapi } from '@strapi/strapi';
import middleware from './middlewares';

console.log(middleware.redirect()) //This is not undefined anymore
export default ({ strapi }: { strapi: Strapi }) => {
  strapi.server.use(middleware.redirect(config, { strapi }));

And that seem to work. But still strange.

[github-actions]

stale-issue-message: |
👋 Hello, and thank you for helping us to make Strapi better!

As part of our effort to keep the issue tracker focused and manageable, we are reviewing older reports.
This issue has been inactive for a while. To ensure we spend our limited resources effectively, we are prioritizing:

• Active issues related to Strapi v5
• Issues with recent engagement
• Issues that are not duplicates of others

This issue will be automatically closed in 14 days unless there is new activity.
👉 If this is still relevant:

• Please add a comment with any updates.
• If the problem also exists in Strapi v5, we encourage you to open (or link to) a v5 issue.

Thank you for helping us improve Strapi! 🙏

[github-actions]

This issue has been closed due to inactivity as part of our backlog review.

If the problem is still relevant (especially in Strapi v5), please let us know or open a new issue.
We truly appreciate your input and contributions 💜