Logs are not appearing in the console window upon completion of the standalone build.

[SeoYoung-C]

Link to the code that reproduces this issue

https://github.com/SeoYoung-C/next-14-issue

To Reproduce

1. I am using Winston. Additionally, I am formatting the logger in ECS format, so I am using the @elastic/winston-ecs-format library to change the log format.

2. When using the app directory structure in next.js 14 and using the @elastic/winston-ecs-format library, I encountered an error "Module not found: Can't resolve 'elastic-apm-node'". To use this module in next.config.js, I added the following option:

   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
   output: 'standalone',
   compiler: {
       removeConsole: {
           exclude: ['error', 'info', 'warn'],
       },
   },
   experimental: {
       serverComponentsExternalPackages: ['@elastic/ecs-winston-format'],
   }
   }

module.exports = nextConfig

3. I'm using Docker to build the app, therefore applying standalone to build the app. After the build, the @elastic/winston-ecs-format library is not included in the .next/standalone/node_modules folder.

4. In the bug-fix version 14.0.4-canary.36, I've confirmed that the module was included in the build. However, in the version built using standalone, the console logs are not being displayed.

### Current vs. Expected behavior

The build should be completed with '@elastic/ecs-winston-format' included in '.next/standalone/node_modules'. Additionally, logs entered via Winston should be visible in the console window.

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.36
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

App Router, Standalone mode (output: "standalone")

Additional context

I've tested this on both local and Docker environments.

[Bahlaouane-Hamza]

I've had the same issue with Pino logger. Not using app router, i had to copy over pino and it dependencies over in Docker standalone

[SeoYoung-C]

I've had the same issue with Pino logger. Not using app router, i had to copy over pino and it dependencies over in Docker standalone

I am aware that the issue can be resolved by using the 'pages', but I am trying to configure a new project using the 'app route' method. I believe there should be bug fixes or improvements made for this approach

[Bahlaouane-Hamza]

Hey @SeoYoung-C, sorry for late response, yeah even in pages did this happens to me when using a monorepo.

I believe you could check https://nextjs.org/docs/pages/api-reference/next-config-js/output

Nextjs use the tracing files to generate the finale output. You may need to have a look at these nft.json files and see if you have winston. If not you may instruct next to load it using outputFileTracingIncludes.

[SeoYoung-C]

I have solved this problem.

const nextConfig = {
  // ....
    experimental: {
        serverComponentsExternalPackages: ['@elastic/ecs-winston-format', ],
    },
         webpack(config, { dev, isServer }) {
        if (!dev && isServer) {
            config.resolve.alias = {
                ...config.resolve.alias,
                '@elastic/ecs-winston-format': path.resolve(
                    __dirname,
                    'node_modules/@elasti/ecs-winston-format',
                ),
            };
        }
       })
   }

Building and log verification were achievable solely through configuration settings.

[masduo]

Hey @SeoYoung-C

Trying your approach and still don't see any logs in the console.

Could you please paste the full working next.config.mjs here, or even better update your sample repo: https://github.com/SeoYoung-C/next-14-issue

Thanks

[SeoYoung-C]

Hey @SeoYoung-C

Trying your approach and still don't see any logs in the console.

Could you please paste the full working next.config.mjs here, or even better update your sample repo: https://github.com/SeoYoung-C/next-14-issue

Thanks

I have just confirmed. The issue you've inquired about doesn't seem to be related to the winston library or ecs-format. Unlike my GitHub repository, in actuality, I've created a custom function to utilize the winston library separately outside of the app folder, rather than using it within the app folder.

Root
├── app
│   ├── api 
│   │   ├── logger.ts
├── components
│   ├── server
│   │   ├── wiston.ts

Currently, I'm not in a position to update the content on Git from outside. I'll make sure to update it when possible at a later time.

[masduo]

Cheers @SeoYoung-C

I managed to get it working by forcing the route.ts to be dynamic, as per docs

export const dynamic = "force-dynamic";

The issue was, when building the standalone app, the route (a basic heartbeat one) was being built as a static page, under .next/standalone/.next/server/app/heartbeat.body, and everytime i was requesting it that static page was being served to clients. Setting it as dynamic runs the route dynamically and shows the logs.

For people reading this, my next.config.mjs is nothing special, no need to add any packages to serverComponentsExternalPackages

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
};

export default nextConfig;

[SeoYoung-C]

건배@SeoYoung-C

문서에 따라route.ts 동적이 되도록 강제하여 작동하게 만들었습니다 .

export const dynamic = "force-dynamic";

문제는 독립 실행형 앱을 구축할 때 경로(기본 하트비트)가 정적 페이지로 구축되고, .next/standalone/.next/server/app/heartbeat.body요청할 때마다 정적 페이지가 클라이언트에 제공된다는 점이었습니다. 동적으로 설정하면 경로가 동적으로 실행되고 로그가 표시됩니다.

이 글을 읽는 사람들에게 my는 next.config.mjs특별한 것이 아니며 패키지를 추가할 필요도 없습니다.serverComponentsExternalPackages

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
};

export default nextConfig;

I'm glad to hear that it was resolved! However, when using the '@elastic/ecs-winston-format' library, the method you mentioned alone doesn't seem to work properly in my project, and I still encounter an error stating that the module cannot be found. I hope this can be helpful for others who are not able to resolve the issue with the method you suggested! Thank you

[seonwoong1]

: ( thx u for ur kindness

[Deliaz]

I am having the same problem with the Winston logger. Logs are present locally and aren't being produced when deploying the build.

Anyone tried this solution? Does it still work?

experimental: {
    serverComponentsExternalPackages: ['...'],
},