reading 'stringifySym' doesn't work with next.js

[tomgrossman]

We are using Next.js.
After upgrading from 8.3.3 to 8.4.0, we are getting the below error when loading any page.
It seems to be related to this commit.

my env:
macos and ubuntu
node: v18.12.1
npm: 9.5.0
next.js: ^13.4.13

 1 of 1 unhandled error

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'stringifySym')

Call Stack
eval
node_modules/pino-http/logger.js (3:25)
./node_modules/pino-http/logger.js
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (8381:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
webpack-internal:///./src/utils/logging.ts (6:67)
./src/utils/logging.ts
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (8226:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
webpack-internal:///./src/lib/analytics.ts (10:75)
./src/lib/analytics.ts
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (7852:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
webpack-internal:///./src/components/analytics-tracker/TrackedButton.tsx (7:75)
./src/components/analytics-tracker/TrackedButton.tsx
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (6807:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
webpack-internal:///./src/components/errors/AppErrorFallback.tsx (5:90)
./src/components/errors/AppErrorFallback.tsx
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (6994:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
webpack-internal:///./src/pages/_app.tsx (20:96)
./src/pages/_app.tsx
file:///Users/user/src/company/ui/.next/static/chunks/pages/_app.js (7874:1)
options.factory
/_next/static/chunks/webpack.js (727:31)
__webpack_require__
file:///Users/user/src/company/ui/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (382:21)
eval
node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app! (5:15)
execute
node_modules/next/dist/client/route-loader.js (233:50)

[mcollina]

Thanks for reporting!

Can you provide steps to reproduce? We often need a reproducible example, e.g. some code that allows someone else to recreate your problem by just copying and pasting it. If it involves more than a couple of different file, create a new repository on GitHub and add a link to that.

A fix would also be highly appreciated. I have no clue why that broke Next.js.

[tomgrossman]

@mcollina I managed to reproduce it with the sample Next.js TS app they suggest in their website
I created a repo with the changes I made to their sample app.

basically, the changes are:

1. create a lib/logging.ts file:

import HttpLogger from 'pino-http';
import Logger from 'pino';

export const rootLogger =
  Logger({
    transport: { target: 'pino-pretty' },
    level: 'debug',
  })

export const httpLogger = HttpLogger({
  logger: rootLogger
});

2. Add a logger line to the _app.tsx file so it will look like:

import { rootLogger } from '../lib/logging';
import '../styles/global.css'
import { AppProps } from 'next/app'

const logger = rootLogger.child({ context: 'analytics' });

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

run and navigate to localhost:3000, you should see the error.

With [email protected] the error reproduces, with [email protected] everything is fine.

Take the package.json file from the repo I created

[mcollina]

You are using a browser build of the logger with pink-http, which is not supported.

[tomgrossman]

You are using a browser build of the logger with pink-http, which is not supported.

@mcollina what do you mean browser build? how can I fix that?

[mcollina]

I'm not a Next.js user so I don't really know. This module is to be used on the server and you are running it inside a browser, or browser like environment,