`middleware` in Typescript does not intercept apis

[SalahAdDin]

Describe the bug

We are setting up the Storybook configuration in typescript files, so we wrote:

import { createDjangoAPIMiddleware } from 'storybook-django/src/middleware';

const origin = process.env.TEST_ORIGIN ?? 'http://localhost:8000';

export const middleware = createDjangoAPIMiddleware({
  origin,
  apiPath: [
    '/pattern-library/',
    '/static/',
    '/api/v2/',
    '/static/keyword/',
    '/static/youtube/',
    '/blog_youtube/static/',
  ],
});

It does not work at all, it is trying to reach http://localhost:6006/pattern-library/api/v1/render-pattern, port 6006 instead of 8000, failing to load the Pattern Library API and the index files (/static/keyword/, /static/youtube/).

Which terms did you search for in the documentation and issue tracker?

We followed the given documentation (here) and searched on internet, unfortunately there is not documentation about middleware.

Environment

macOS Sequoia 15.7.3 (24G419) arm64
Zen Browser 1.17.15b (Firefox 146.0.1) (aarch64)
Node v20.19.3
"typescript": "^5.9.2",

Steps to reproduce

(Write your steps here:)

1. Setup Storybook with Django.
2. Write the middle-ware file as typescript.
3. Write the middle-ware.
4. Run the project.
5. Check the browser console.
6. See the error.
7. Write the middle-ware file as a javascript.
8. Write the middle-ware as the documentation.
9. Run the project.
10. Check the browser console.
11. Verify there is no issue.

Expected behavior

It should reach the given API files properly.

Actual behavior

Reaching the files in wrong path.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)