Winston: Can not using in React Native, even only log to console.

[jaggerwang]

May be React Native disabled 'fs' module, but I just log to console, no need for 'fs'.

code:

/**
 * Zai Qiu Chang App
 * https://www.zaiqiuchang.com/
 */

import winston from 'winston';

import {debug} from './config';

export default new winston.Logger({
  level: debug ? 'debug' : 'info',
  transports: [
    new winston.transports.Console()
  ]
});

import logger from './logger';
logger.debug("app");

error:

[jaggerwang]

Anybody here?

[pbruna]

Hi @jaggerwang you can use rn-nodeify to _hack_ the modules that are not present on React Native.

For example in you package.json:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "postinstall": "node_modules/.bin/rn-nodeify --install fs,path --hack"
  },

[curtismenmuir]

I have managed to get Winston logging to console in React-Native app, but it fails when writing to file.
Issue writing to file is due to the fs.existsSync() call in winston.transports.File. I haven't been able to get around this so far.

Steps to get Winston logging to console in React-Native:

1. Install rn-nodeify, winston & asyncstorage-down packages to repo (yarn or npm)

2. Add post install script to package.json:
   "postinstall": "rn-nodeify --install util,buffer,os,fs,path,zlib,http,https,_stream_transform,assert,events,url,stream,process --hack"

3. Run "yarn / npm install" to create shim.js and hack modules (may need to run a couple times -> until the console logs that it is not overwriting any of the hacked modules).

4. Add following to beginning of index.js:
   import "./shim"; global.Symbol = require("core-js/es6/symbol"); require("core-js/fn/symbol/iterator"); require("core-js/fn/map"); require("core-js/fn/set"); require("core-js/fn/array/find");

5. Add to code base:
   import winston from "winston"; ... render(){ const logger = winston.createLogger({ transports: [new winston.transports.Console()] }); logger.log({ level: "info", message: "Updating Console with log message!" }); ... }

[truongngoctuan]

I got this error in react-native

Error: Unable to resolve module `util` from node_modules/winston/dist/winston/common.js`: Module `util` does not exist in the Haste module map

[BitterDoneWork]

@truongngoctuan I got that error too. I was able to move past it by
In cmd or terminal:
npm install nodeify

Add to package.json scripts:
"postinstall": "rn-nodeify --install util,os,fs --hack"

But, now I'm stuck on another error after adding @curtismenmuir 's steps 1-3 (can't progress past 3). I run react-native run-android --no-jetifier and see this error:
``` error: bundling failed: Error:
Unable to resolve module './support/types' from 'C:UsersReposawesomeprojectrnnAwesomeProjectnode_modulesutilutil.js':
The module './support/types' could not be found from
'C:UsersReposawesomeprojectrnnAwesomeProjectnode_modulesutilutil.js'.
Indeed, none of these files exist:

• 'C:UsersReposawesomeprojectrnnAwesomeProjectnode_modulesutilsupporttypes(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)'
• 'C:UsersReposawesomeprojectrnnAwesomeProjectnode_modulesutilsupporttypesindex(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)'
  ```

It's correct, the only two files in the
C:UsersReposawesomeprojectrnnAwesomeProjectnode_modulesutilsupport
directory are isBuffer.js and isBufferBrowser.js.

I downloaded types.js from browserify and saved it in that directory, then reran react-native run-android --no-jetifier and got another error:
error: bundling failed: Error: Unable to resolve module 'is-generator-function' from 'C:\Users\epzqv\Repos\awesomeprojectrnn\AwesomeProject\node_modules\util\support\types.js': Module 'is-generator-function' does not exist in the Haste module map

At this point, it looks like the Node.js dependencies are too much trouble to keep working on Winston. The logging would be sweet, but it can be implemented manually without all this trouble.

[josephbuchma]

In order to make it work with RN you should alias missing modules in babel.config.js.

1. Install empty and stream-browserify
2. Edit babel.config.js (Some of this aliases might be redundant as I just copied it from my current project):

  // ...
  plugins: [
   //...
    [
      'module-resolver',
      {
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx',
        ],
        root: [path.resolve(__dirname)],
        alias: {
          os: require.resolve('empty/object'),
          http: require.resolve('empty/object'),
          https: require.resolve('empty/object'),
          path: require.resolve('empty/object'),
          zlib: require.resolve('empty/object'),
          stream: 'stream-browserify',
          'node-pre-gyp': require.resolve('empty/object'),
          fs: require.resolve('empty/object'),
          'fs-extra': require.resolve('empty/object'),
          vm: require.resolve('empty/object'),
          'set-blocking': require.resolve('empty/function'),
        },
      },
    ],
  ],

1. Run react-native start --resetCache - resetCache flag is important here.

If you still encounter Error: Unable to resolve module X error, add an alias for it in the same fashion. If alias is already there try to rm -rf $TMPDIR/haste* && rm -rf $TMPDIR/metro* and then react-native start --resetCache again.