TypeError: Cannot read properties of null (reading 'fn') ...\node_modules\next\dist\compiled\webpack\bundle5.js:13:29685

[jdoe802]

Minimally reproduceable code (nextjs app)

next.config.js

/** @type {import("next").NextConfig} */
const { PinoWebpackPlugin } = require('pino-webpack-plugin')
const path = require('path');



const nextConfig = {
    webpack(config) {
        config.plugins.push(new PinoWebpackPlugin({transports: ['pino-pretty']}));

        return config;
    },
    poweredByHeader: false,
    experimental: {
        // instrumentationHook: true
        serverComponentsExternalPackages: ['pino'],
    }
};
module.exports = nextConfig;

prettyLogger.ts

import pino from 'pino';


const transport = pino.transport({
    target: 'pino-pretty',
});


export const prettyLogger = pino(transport);

package.json

{
  "name": "next13-app-pino-pretty",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
        "@dnd-kit/core": "6.1.0",
        "@dnd-kit/sortable": "8.0.0",
        "@dnd-kit/utilities": "3.2.2",
        "@emotion/react": "11.11.4",
        "@emotion/styled": "11.11.0",
        "@mui/x-date-pickers": "6.19.7",
        "@next-auth/mongodb-adapter": "1.1.3",
        "@radix-ui/react-dialog": "1.0.5",
        "@radix-ui/react-icons": "1.3.0",
        "@radix-ui/react-toggle-group": "1.0.4",
        "@radix-ui/themes": "2.0.3",
        "@svgr/webpack": "8.1.0",
        "@tanstack/react-query": "5.28.6",
        "@types/tunnel": "0.0.7",
        "@types/uuid": "9.0.8",
        "autoprefixer": "10.4.18",
        "axios": "1.6.7",
        "clsx": "2.1.0",
        "date-fns": "3.4.0",
        "date-fns-tz": "3.1.3",
        "lodash": "4.17.21",
        "mongoose": "8.2.1",
        "mongoose-paginate-v2": "1.8.0",
        "net": "1.0.2",
        "next": "14.1.3",
        "next-auth": "4.24.7",
        "openid-client": "5.6.5",
        "papaparse": "5.4.1",
        "pino": "^9.3.2",
        "pino-mongodb": "^4.3.0",
        "pino-webpack-plugin": "^2.0.0",
        "postcss": "8.4.35",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-hot-toast": "2.4.1",
        "react-intersection-observer": "9.8.1",
        "react-loading-overlay-ts": "2.0.2",
        "react-loading-skeleton": "3.4.0",
        "react-phone-input-2": "2.15.1",
        "react-router-dom": "6.23.1",
        "react-voice-visualizer": "1.8.1",
        "serialize-error": "11.0.3",
        "sharp": "0.33.2",
        "tailwindcss": "3.4.1",
        "thread-stream": "^3.1.0",
        "tls": "0.0.1",
        "tunnel": "0.0.6",
        "type-fest": "4.15.0",
        "uuid": "9.0.1",
        "webm-to-wav-converter": "1.1.0",
        "xmlbuilder2": "3.1.1",
        "zod": "3.22.4",
        "zustand": "4.5.2"
    },
    "devDependencies": {
        "@playwright/test": "1.44.1",
        "@stylistic/eslint-plugin": "1.7.0",
        "@types/lodash": "4.17.0",
        "@types/node": "20.11.27",
        "@types/papaparse": "5.3.14",
        "@types/react": "18.2.66",
        "@types/react-dom": "18.2.22",
        "@typescript-eslint/eslint-plugin": "7.2.0",
        "eslint": "8.57.0",
        "eslint-config-next": "14.1.3",
        "husky": "8.0.0",
        "lint-staged": "15.2.2",
        "pino-pretty": "11.1.0",
        "typescript": "5.4.2"
    }
}

this code works with the webpack portion commented out, but I want it to work with the webpack portion. After leaving in the webpack portion I get the following error

TypeError: Cannot read properties of null (reading 'fn')
at...\node_modules\next\dist\compiled\webpack\bundle5.js:13:29685
at Array.map ()
at AsyncSeriesHookCodeFactory.setup (...\node_modules\next\dist\compiled\webpack\bundle5.js:13:29675)
at Hook.COMPILE [as compile] (...\node_modules\next\dist\compiled\webpack\bundle5.js:13:24094)
at Hook._createCall (...\node_modules\next\dist\compiled\webpack\bundle5.js:13:26635)
at Hook.CALL_ASYNC_DELEGATE (...\node_modules\next\dist\compiled\webpack\bundle5.js:13:25988)
at run (...\node_modules\next\dist\compiled\webpack\bundle5.js:28:140498)
at Compiler.run (...\node_modules\next\dist\compiled\webpack\bundle5.js:28:140794)
at ...\node_modules\pino-webpack-plugin\src\index.js:134:23
at ...\node_modules\next\dist\compiled\webpack\bundle5.js:28:70677

[magnusriga]

EDIT:

• The below worked build-time, but not runtime. I am getting the same issue as the OP: Cannot read properties of null (reading 'fn').

---

Posting here as well, in case it helps others in the future:

I spent two days around the same issue, and subsequent ones.

After a lot of trial-and-error I figured out how to make pino work in a Next.js monorepo (Turborepo), with transports, pino-pretty, and functions for messageFormat, customPrettifier, and so on (i.e. non-streamable types).

Here is the setup, with explanations: vercel/next.js#46987 (comment)

Hope it helps (the key to the worker issue you are getting was the webpack part).