Module not found: Can't resolve 'fs'

Hi,

I just discovered winston-react. I made this config on next.js

I'm receiving the following error:

error - ./node_modules/winston/dist/winston/tail-file.js:9:0
Module not found: Can't resolve 'fs'

I don't see the point of installing fs on the client side

/lib/logger.js

const winston = require('winston');

export default winston.createLogger({
    level: 'info',
    format: winston.format.json(),
    defaultMeta: { service: 'user-service' },
    transports: [
        new winston.transports.Console({
            format: winston.format.simple(),
        })
    ],
});

/pages/_app.js

import React from 'react';
import {ApolloProvider} from '@apollo/client'
import {useApollo} from '../apollo/client'
import {ThemeProvider} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Head from 'next/head';
import theme from '../components/theme';
import PropTypes from 'prop-types';
import {appWithTranslation} from 'next-i18next';
import {Provider} from 'next-auth/client'
import logger from '../lib/logger'
import {WinstonProvider} from 'winston-react';

/**
 * Inspired from https://github.com/mui-org/material-ui/tree/master/examples/nextjs to add SSR to material-ui
 * @param Component
 * @param pageProps
 * @returns {JSX.Element}
 * @constructor
 */

function App({Component, pageProps}) {
    const apolloClient = useApollo(pageProps.initialApolloState)

    React.useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles = document.querySelector('#jss-server-side');
        if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
        }
    }, []);

    return (
        <ApolloProvider client={apolloClient}>
            <WinstonProvider logger={logger}>
                <Provider session={pageProps.session}>
                    <Head>
                        <title>WeAlly</title>
                        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
                    </Head>
                    <ThemeProvider theme={theme}>
                        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                        <CssBaseline/>
                        <Component {...pageProps} />
                    </ThemeProvider>
                </Provider>
            </WinstonProvider>
        </ApolloProvider>
    )
}

export default appWithTranslation(App);

App.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired,
};

then in my code

function renderItem(props, tile, selectedIssueId) {
    const {t, classes, view} = props;
    const logger = useWinstonLogger()

package.json

{
  "name": "api-routes-apollo-server-and-client-auth",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "back": "node ./server/starter.js",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@apollo/client": "^3.0.2",
    "@fontsource/roboto": "^4.4.5",
    "@google/maps": "^1.1.3",
    "@hapi/iron": "6.0.0",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "apollo-server-micro": "^2.14.2",
    "body-parser": "^1.19.0",
    "classnames": "^2.3.1",
    "cookie": "^0.4.1",
    "cors": "^2.8.5",
    "deepmerge": "4.2.2",
    "ejs": "^3.1.6",
    "express-graphql": "^0.12.0",
    "express-jwt": "^6.0.0",
    "express-session": "^1.17.2",
    "fb": "^2.0.0",
    "fs": "^0.0.1-security",
    "graphql": "^14.0.2",
    "image-type": "^4.1.0",
    "moment": "^2.29.1",
    "mongodb": "^3.6.9",
    "next": "latest",
    "next-auth": "^3.27.0",
    "next-i18next": "^8.5.0",
    "passport": "^0.4.1",
    "passport-facebook": "^3.0.0",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-moment": "^1.1.1",
    "sanitize-html": "^2.4.0",
    "winston-react": "^1.0.0-RC.0"
  },
  "license": "MIT"
}

afex-connect / winston-react

Module not found: Can't resolve 'fs' #193