Doesn't work in Next.js middleware (Edge functions)

[will-stone]

Current behaviour

When using Ansis inside Next.js's middleware.ts file, colours aren't enabled.

Expected behaviour

Colours shown in terminal when using Ansis in a Next.js edge function.

Reproduction Example

Codesandbox

Environment

• OS: macOS
• version of Node.js: 18.16.0
• version of Webpack: Next.js uses Turbopack now.
• version of the Plugin: 1.5.6

Additional context

I've narrowed this down to this line:

ansis/src/ansi-codes.js

Line 29 in 7fca74c

const isTerm = stdout && 'isTTY' in stdout &&

and process.stdout not being available in Next.js's middleware. Is the stdout && 'isTTY' in stdout necessary if you also require the /^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM) to pass?

[will-stone]

PS thanks for this library 😄 It's probably the most versatile of the new fast colour loggers. Great to have a package still supporting CJS too, unlike some other chalky libs 😬

[webdiscus]

Hello @will-stone,

thank you for the issue report!
I will fix it.

Of course, your PR would be welcome too ;-)

[will-stone]

I'm happy to PR it, for sure. However, I'm a little worried I could break other situations. Would you be happy for me to add a failing test PR instead? I can try to set up a test that mimics Next.js middleware environment.

[webdiscus]

I can try to set up a test that mimics Next.js middleware environment.

Yes, please create a small repository with a reproducible problem. This will help me solve the issue faster.

[will-stone]

Oh sure, happy to do that instead too. The codesandbox can be a bit flaky. I'll let you know when I have a repo for you to spin up 👍

[will-stone]

Here you go: https://github.com/will-stone/nextjs-ansis

Thanks! 🙂

[webdiscus]

@will-stone

how can be set runtime as nodejs? I need it for testing next.js in nodejs mode.

I set export const runtime = 'nodejs' in index.tsx or middelware.ts, not works,
env contains always: NEXT_RUNTIME: 'edge'

[will-stone]

Ah, middleware is always run in edge mode. This is the cause of the problem.

[webdiscus]

ok, no problem

[will-stone]

This is one of the reasons I've been looking at Ansis: other libraries rely on node:tty and node utils aren't available in edge runtime. Here's an example of that: jorgebucaran/colorette#100 However, my investigation has also shown process.stdout isn't available either. Hoping we can work around that though.

There's a Next.js issue here that started me looking at this library. The author reckons Ansis works but maybe that was an older version.

[webdiscus]

I know, the node:tty not works in edge mode, therefore I don't use any node lib for it.
Locally by me, colors already works in edge mode.
I must write many tests yet.

[webdiscus]

@will-stone

can you please check the beta version v1.6.0-beta.0?
Thank you!

[will-stone]

It works!

will-stone/nextjs-ansis@85e413c

Thank you for this amazingly quick turnaround 🤯 This needs to be marketed to the Next.js peeps at Vercel as this lib could be their default for all logging now.

[webdiscus]

@will-stone Thank you for the suggestion.

This needs to be marketed to the Next.js peeps at Vercel as this lib could be their default for all logging now.

Many developers would benefit from having a small/fast/powerful/universal color library.
And it would be nice if Next.js had ansis "out of the box".

I'm afraid that Next.js will reject Ansis due to its low popularity.
Ansis has 100k downloads per week and is used by 2.3k developers.

Although chalk is also developed and maintained by one person, it is a very popular person.

We can try to suggest Asisis in Next.js, but it should not be the author (me), but another developer. If I do this, it will be perceived as self-promotion/spam.

[will-stone]

Yeah sorry, more of a throw away comment really. I’ll put a thread in their GitHub discussions to direct people this way when looking for a color logger that supports all of Next.js 👍😊

[webdiscus]

@will-stone thank you :-)

[webdiscus]

@will-stone the support for Next.js is released in the v2.0.0.

Note:

In the new release is changed named import:
NEW (v2.x.x) named import

import ansis, { red } from 'ansis'; // default and named import
ansis.red`error`;
red`error`;

OLD (v1.5.x) named import:

import ansis from 'ansis'; // default import
import { red } from 'ansis/colors'; // named import
ansis.red`error`;
red`error`;

[webdiscus]

can be closed the issue?

[will-stone]

Awesome! Thanks, yeah let's close and I'll open new issues if I find any 🙂