[Bug]: Unable to use logger created using createLogger in angular 12 and webpack 5 - ReferenceError: process is not defined

[KirthikaMeenakshi]

🔎 Search Terms

Angular 12, webpack 5, Uncaught Reference error, process is not edfined

The problem

Step 1: Create logger using createLogger

const winston = require('winston');

const logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
defaultMeta: { },
transports: [
new winston.transports.File({ filename: 'error.log', level: 'error'}),
new winston.transports.File({ filename: 'combined.log'})
],

});

module.exports = logger;

Step 2: Source code/.ts file
//import the logger
import {logger} from 'src/app/utils/logger/logger';

//use in the code:
.........
.........
logger.info(" TESING LOGGER");
.........

Step 3: Build the application after resolving dependencies and compiler problems by adding the below libraries in tsconfig.json

"paths": {
"http": [ "./node_modules/stream-http" ],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify" ],
"path": ["./node_modules/path-browserify"],
"zlib": ["./node_modules/browserify-zlib"],
"stream": ["./node_modules/stream-browserify"],
},

In angular.json
"allowedCommonJsDependencies": [
"chart.js",
"chartjs-plugin-annotation",
"src/app/utils/logger/logger"
],

Step 4: Run the application

The application doesnt load any contents; failing with the below error,

Uncaught ReferenceError: process is not defined
77317 supports-colors.js:31

What version of Winston presents the issue?

v3.8.1

What version of Node are you using?

v17.7.1

If this worked in a previous version of Winston, which was it?

No response

Minimum Working Example

const winston = require('winston');

const logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
defaultMeta: { },
transports: [
new winston.transports.File({ filename: 'error.log', level: 'error'}),
new winston.transports.File({ filename: 'combined.log'})
],

});

module.exports = logger;

//in src code

logger.info(" TESING LOGGER");

Additional information

No response

[KirthikaMeenakshi]

Keep @types/nodes and @colors/colors in dependencies rather than dev-depnedencies to make it work.

[wbt]

That makes sense for colors, as I believe it's used at runtime, but the @types package seems like it would be appropriate in dev dependencies, only needed to transpile typescript to javascript.

[KirthikaMeenakshi]

When this fix for colors can be expected? Because of the dependencies not available at runtime. I couldn't use winston logger at all.. Its a blocker for us to use winston. Could u please help providing update on this?

[wbt]

I just published 3.8.2; see if that helps.

[KirthikaMeenakshi]

Hi @wbt, Thanks for the update....

I have picked the latest 3.8.2. But there are lot of dependency issues which is not allowing to use the winston logger in my application. The winston is so interesting open source tool but blocking me to use its APIs with lot of dependency issues like,

1. Lot of Uncaught reference errors for methods or variables like setImmediate()/ process/argv()/ nextTrack() etc,..
2. First while creating winston object then while using its transports

Am I missing something here. please suggest!!!!!

Sample error: [this is common across all browsers]

[wbt]

I suggest doing some more searching for examples or asking on StackOverflow regarding in-browser use as I don't use the library in-browser myself. It looks like you are trying to create a log file stored in a directory on the user's computer, which is not allowed - websites and scripts running in the browser generally don't have full fs (filesystem) access to either the user's machine or to any server. It seems like there may be some fundamental misconceptions about what you are trying to accomplish and with zero support for Winston, I don't have time to go through and debug that.