Winston: Winston 3 console transport (and base transport) not working in the browser

[jpsear]

Please tell us about your environment:

• _winston version?_
  
  
  
  • [ ] winston@2
  
  
  • [x] winston@3
  
  
• _node -v outputs:_ 8.11.1
• _Operating System?_ macOS
• _Language?_ JS, ES6+

What is the problem?

Am I right in thinking that Winston 3 is aiming to be compatible in Node and the browser? If so, the browser throws up on setImmediate, as it's a native Node thing. Currently, setImmediate is recommended to use this within new transports, so I can't quite see how this can work.

To re-produce:

Init somewhere:

import { createLogger, transports } from 'winston'

const consoleTransport = new transports.Console({ handleExceptions: true })

const logger = createLogger({
  transports: [ consoleTransport ]
})

export default logger

Import and use somewhere in client-side code:

import logger from './logger'
logger.info('message for the browser console')

What do you expect to happen instead?

The browser console to log out the message

Sorry if I'm missing something here!

[DABH]

How are you bundling / do you have an example project? If I use webpack (and add

node: {
    fs: 'empty'
}

to my webpack config to ignore the fs dependency of some transports) then I can e.g. use the console transport just fine (copy/pasting your code). Looks like there are some attempts at making browser support for setImmediate, e.g. https://github.com/YuzuJS/setImmediate, but also not sure exactly what errors you're getting since I can't reproduce yet with 3.0.

[jpsear]

It's a Meteor app, so I don't have a huge amount of control over bundling.

I will post the error output later today if I get a second, but it's effectively setImmediate is undefined or similar.

Good shout on the Webpack settings though, I think that will work for most people. I just don't think I can tweak that in a Meteor app :(

[jpsear]

Perhaps that polyfill will do the job actually. I'll give it a go!

[jpsear]

Yeah, polyfilling setImmediate worked a charm — I guess I will close for now. Thanks!

[DABH]

Very cool, thanks for reporting back and letting us know!

@indexzero What do you think about adding a "browser readme" that contains tips for getting winston to work in various browsers/bundlers? Seems like different setups like webpack, meteor, etc. (see above) require different tricks to get winston working, it might be nice to document these all in one place so we can just refer people to there.

[sneko]

Hi! @jpsear how did you do to polyfill it? I tried to provide variable with webpack but without succeeding 😢

Here is my post: https://github.com/winstonjs/winston/issues/1489

[jpsear]

@sneko I just installed setImmediate through npm: https://github.com/YuzuJS/setImmediate, then included it in my webpack bundle by importing it:

import 'setimmediate'

Then it's patched and available globally, on the window object

[sneko]

@jpsear thank you very much!

I misunderstood you at first: I tried to import it in the main webpack file, but I had to import it in a file that will be "compiled" by webpack ---> so import it at the root of your source files (e.g. main.ts)

[jpsear]

@sneko Yep, you got it. No worries 👍

[matthiassommer]

@jpsear Thanks, this fixed it for my Vue app.

npm install --save setimmediate
npm i

import 'setimmediate'; in the main.ts file