Issue with Next.js 'use client'

[ixartz]

First thank you, wanted to try this library and love the promise about supporting multi environment: node.js, edge and browser.

The library works perfectly with RSC and Route Handler (API) with Next.js. There isn't any issue with server side.

I have some issue when using with client component 'use client' in Next.js:

The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The configuration I use:

import { configure, getConsoleSink, getLogger } from '@logtape/logtape';

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ['logtape', 'meta'], level: 'warning', sinks: ['console'] },
    { category: 'app', level: 'debug', sinks: ['console'] },
  ],
});

export const logger = getLogger(['app']);

[dahlia]

What if you remove await from the configuration code? That would work too for the most cases.

[ixartz]

Yes, thank so much, it works much more better.

When the await is necessary?

[dahlia]

It's necessary if any of sinks you'd like to use is AsyncDisposable, e.g., stream sink. That said, if you can prepend await, you should.

[dahlia]

@ixartz You many need to use v0.6.3, which is released today. It contains a small fix for Node.js client rendering.

[ixartz]

@dahlia Thank you for updating the package, but I have new error with the package now:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:

I don't have this issue in 0.6.2

[dahlia]

Could you share the import trace as well?

[ixartz]

@dahlia Unfortunately, I have reverted everything. But, you should be able to create a new Next.js app and add logtail, you'll able to get the same error.

[kachkaev]

I can confirm a new issue in Next.js (Pages router) and 0.6.3:

 ⚠ ./node_modules/@logtape/logtape/esm/nodeUtil.cjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@logtape/logtape/esm/nodeUtil.cjs
./node_modules/@logtape/logtape/esm/nodeUtil.js
./node_modules/@logtape/logtape/esm/formatter.js
./node_modules/@logtape/logtape/esm/mod.js
./src/some-file.ts

There is import { getLogger } from '@logtape/logtape' in ./src/some-file.ts in my case.

The error shows up in server logs, i.e. it happens during the SSR phase, in Node.js environment. When using logtape 0.6.2, this warning does not show up.

[dahlia]

@ixartz @kachkaev Could you give v0.6.4-dev.96 a try? I addressed this issue again, and I hope it will work for you.

[kachkaev]

👋 @dahlia! I tried v0.6.4-dev.96 right now. Still getting this warning from Next.js webpack (on the server):

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@logtape/logtape/esm/nodeUtil.cjs
./node_modules/@logtape/logtape/esm/nodeUtil.js
./node_modules/@logtape/logtape/esm/formatter.js
./node_modules/@logtape/logtape/esm/mod.js
./src/some-file.ts

This warning does not show up on 0.6.2, sticking with it for now.

[camflan]

Still happening on 0.7.1 too

[camflan]

Adding @logtape/logtape to serverComponentsExternalPackages fixes the error for me.

const nextConfig = {
  experimental: {
    instrumentationHook: true, // I'm running logtape config/init in instrumentation.ts when NEXT_RUNTIME is 'nodejs'
    serverComponentsExternalPackages: ["@logtape/logtape"],
    ...
  },
  ...
}

[camflan]

Still need to figure out how to run on 'edge' though 🤔