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 🤔

[skeet70]

I ran into this using webpack, not Next.js. Workaround for me was adding module.unknownContextCritical: false to my webpack config.

[dahlia]

Thanks for reporting these issues. The root cause is that LogTape currently bundles all functionality into a single package, including features like file sinks that can't run in browsers. While we try to handle this with conditional code, it creates bundling challenges in browser environments.

To properly address this, we're planning to split browser-incompatible features into separate packages for the next major version:

• Core functionality will remain in @logtape/logtape, guaranteed to work in all environments including browsers
• File-system related features will move to @logtape/file
• Other environment-specific features will get their own packages as needed

This will give you better control over which features to include, while ensuring seamless bundling in browser environments. The core package will have zero compromise on browser compatibility.

For now, you can try the workarounds mentioned in this thread. We'll post updates as we make progress on the package reorganization.

[dahlia]

Could you try v0.9.0-dev.133?