TypeError: pino__WEBPACK_IMPORTED_MODULE_8___default.a.destination is not a function

[9bits]

I'm running into some issues while trying out Pino with React.

const dest = pino.destination();
    logger.info("Hydrogen");

The code above totally works, but when I try to add a destination, it fails with the error:

Btw the way, my end goal is to get pino to publish the logs to a url. Does pino currently support this?

My environment is a super basic one created with npx create-react-app my-app

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import pino from 'pino'
class App extends Component {
  render() {

    const dest = pino.destination("/tmp/pino");
    const logger = pino(dest);
    logger.info("Hydrogen");

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

This is my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/pino": "^5.8.5",
    "pino": "^5.11.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "typescript": "^3.3.3333"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[davidmarkclements]

So, pino.destination is for server side logging.

If you’re trying to do SSR here, and you’re transpiling your server code, then you need to tell webpack to use the main package.json field instead of the browser field (pretty sure there’s a way to prescribe module resolution in webpack)

For logging to an endpoint I started pino-txrx a while back but never finished it, but may get into gear and take it across the line if there’s demand

[davidmarkclements]

If it’s for browser side, take a look at the browser API in the docs http://getpino.io/#/docs/browser

[9bits]

Thank you, that was really helpful!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.