This repository was archived by the owner on Sep 25, 2023. It is now read-only.
This repository was archived by the owner on Sep 25, 2023. It is now read-only.
Module not found: Can't resolve 'fs' #193
Description
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"
}