Importing createMiddleware() doesn't work as the tutorial suggests in type:module packages

[DamienCassou]

Description

In a type:module package, the suggested way to import createMiddleware() doesn't work.

Workaround1: Remove the type:module line of your package.json

Workaround2: Change the suggested middleware.js file to something like

import middleware from "next-intl/middleware";

const createMiddleware = middleware.default;

export default createMiddleware({...});

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/DamienCassou/next-intl-issue-createMiddleware

Reproduction description

Steps to reproduce:

1. clone the reproduction project
2. type yarn
3. type yarn run dev
4. open http://localhost:3000

Actual behavior:

TypeError: next_intl_middleware__WEBPACK_IMPORTED_MODULE_0__ is not a function

src/middleware.js (3:1) @ <unknown>

  1 | import createMiddleware from 'next-intl/middleware';
  2 |
> 3 | export default createMiddleware({
    | ^
  4 |   // A list of all locales that are supported
  5 |   locales: ['en', 'de'],
  6 |

Expected behaviour

I see the content of Page.jsx in English.

[amannn]

That's a good point, thanks!

I'm working on full ESM support in #1115, that should address this.

[DamienCassou]

Thank you for the link. Feel free to close this issue if it doesn't bring any more value.

[amannn]

Definitely fine to keep it for now as it's a bug. Also, thank you for posting your workaround, maybe other users will run into this too!