Winston: Winston 3 and create-react-app throws Uncaught ReferenceError: stream is not defined

[bykof]

Please tell us about your environment:

• _winston version?_ winston@3
• _node -v outputs:_ v10.11.0
• _Operating System?_ macOS
• _Language?_ ES6/7

What is the problem?

I create a new application with create-react-app and install winston 3.1.0 with npm install winston --save.
After that I create a new file called myLogger.js and write logger from the quickstart:

import winston from 'winston';


const myLogger = winston.createLogger({
    level: 'info',
    format: winston.format.json(),
    transports: [
        new winston.transports.Console({
            format: winston.format.simple()
        })
    ]
});

//
// If we're not in production then log to the `console` with the format:
// `${info.level}: ${info.message} JSON.stringify({ ...rest }) `
//
if (process.env.NODE_ENV !== 'production') {
    myLogger.add(
        new winston.transports.Console({
            format: winston.format.simple(),
            level: 'debug'
        })
    );
}

export default myLogger;

After that I import the logger in the create-react-app created App.js:

import myLogger from './myLogger';

export default class App extends Component {

  componentDidMount() {
    myLogger.debug('Mounted!');
  }

  render() {return (</div>)}
}

If I start now the development server I get the error:

ReferenceError: stream is not defined
(anonymous function)
node_modules/winston/lib/winston/logger.js:631
  628 |   }]);
  629 | 
  630 |   return Logger;
> 631 | }(stream.Transform);
  632 | 

What do you expect to happen instead?

It just works on a freshly started create-react-app :D

Other information

Here is the full stack:

logger.js:631 Uncaught ReferenceError: stream is not defined
    at Object.<anonymous> (logger.js:631)
    at Object../node_modules/winston/lib/winston/logger.js (logger.js:656)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object../node_modules/winston/lib/winston/create-logger.js (create-logger.js:24)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object../node_modules/winston/lib/winston.js (winston.js:55)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Module../src/myLogger.js (myLogger.js:1)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?da7c:45)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?02e3:45)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:127)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

[DABH]

Thanks for the report. Trouble seems to be we use Node.js stream but that API isn't available in the browser natively. Seems we could use stream-browserify/browserify; the point is I don't want to ship a bundle for Node.js that has extra cruft to make browsers work. @indexzero any thoughts on the right move here?

Note, there may be a way to edit your webpack config to provide a polyfill/shim for stream, without having to modify winston itself. If you find such a solution, please let us know :)

related:
https://github.com/browserify/browserify/pull/581
https://github.com/rvagg/through2/pull/20/files
https://github.com/substack/stream-browserify

[osdiab]

Just want to bump this discussion since I'm running into it as well. Not sure the best solution

[osdiab]

I'm unaware of how this works, but given that stream is from require("readable-stream"), and readable-stream is supposed to support browsers, why is it not defined there?

[jschimmoeller]

we just hit this issue today also; how do we resolve it

[jamesbechet]

I was able to fix it locally, there's the pull request: https://github.com/winstonjs/winston/pull/1521

[libetl]

any plan to cut a fix version @winstonjs ?

[alexCatena]

Bump to have this active in current version @winstonjs

[libetl]

@indexzero Can I ask you to bump a new version including this one issue ?

We really need that one.
Thanks for your understanding.

[ArcticTee]

Still a problem when downloaded from npm :/ @winstonjs

EDIT:

I added the commit reference to the merge request:

"winston": "git+https://github.com/winstonjs/winston.git#c42ab7fdc51b88db180a7dd90c52ce04ddd4e054"

to my package.json, but now I get an Error while using file log.

TypeError: fs.stat is not a function
File.stat
node_modules/winston/lib/winston/transports/file.js:433

  430 | var target = this._getFile();
  431 | 
  432 | var fullpath = path.join(this.dirname, target);
> 433 | fs.stat(fullpath, function (err, stat) {
      | ^  434 |   if (err && err.code === 'ENOENT') {
  435 |     debug('ENOENT ok', fullpath); // Update internally tracked filename with the new target name.

When using:

Module../src/utils/Logger.js
src/utils/Logger.js:17

  14 |     // - Write to all logs with level `info` and below to `combined.log`
  15 |     //  - Write all logs error (and below) to `error.log`.
  16 |     //
> 17 |     new transports.File({ filename: ERROR_LOG_PATH, level: 'error' }),
  18 |     new transports.File({ filename: LOG_PATH }),
  19 |   ],
  20 | });

[jamesbechet]

@ArcticTee try adding:
node: { fs: 'empty' }, to your webpack.config.js

[ArcticTee]

Oh ok. I guess I would have to run react-scripts eject to configure webpack. Maybe I will just remove the file logging.

[xariaSg]

Is this issue resolved? I have the same issue.

[andersonleite]

Same issue here.

[libetl]

fixed but not released since 31 Oct

[andersonleite]

@libetl Thanks for the info.
I saw that 3.2.0 will have the fix. When are you planning to release it?
Is there a way for us to use 3.2.0-pre now?

[DABH]

You can always reference master in your package.json instead of a version number. We are hoping to publish 3.2.0 on 12/23 if no surprises come up in the maintainers’ schedules.

[andersonleite]

As I understand, after 3.2 is released, winston will be shipped to npm already transpiled. How about the dependencies? I see that, for example, logform is also not transpiled.

[DABH]

logform and winston-transport are transpiled too on master — all the Winston packages will receive a bump to npm when we publish

[libetl]

I cannot use master from my package.json.

I am behind a private npm mirror which forbids direct references to git.

[kibertoad]

@maamounapprise with 3.2.0?

[maamounapprise]

@kibertoad actually it was fixed with 3.2.0 that's why I deleted my comment, thanks!

[tayupov]

How would I go about installing [email protected]? I'm experiencing the same problem.

[wyvern8]

any update on 3.2.0 release date?

[DABH]

Going to lose this since 3.2.0 is out now, but please feel free to re-open or make a new issue if you experience similar issues with this latest release.

[MonVines]

Getting this error with Winston 3.2.

Uncaught TypeError: fs.existsSync is not a function
at File._createLogDirIfNotExist (file.js:804)
at new File (file.js:132)
at Object. (mylogger.js:16)
at __webpack_require__ (bootstrap 284d16fcfe1dcfa44176:676)
at fn (bootstrap 284d16fcfe1dcfa44176:87)
at Object. (mymodule.js:5)
at __webpack_require__ (bootstrap 284d16fcfe1dcfa44176:676)
at fn (bootstrap 284d16fcfe1dcfa44176:87)
at Object. (app.js:21)
at __webpack_require__ (bootstrap 284d16fcfe1dcfa44176:676)