philikon / ReactNativify

How to use node.js libraries in React Native
244 stars 23 forks source link

cannot read property 'seed' of undefined #13

Closed bitabs closed 6 years ago

bitabs commented 6 years ago

Hi guys,

I'm trying to use the same examples given in ReactNativify in my react native to see if it actually works. However, I'm running into this wierd error which seems that no one has ever asked about. Namely, "cannot read property 'seed' of undefined".

I'm Using ignite template for react native, and the problem only occurs when I import ReactNativeExample in my App.js inside containters directory:

import DebugConfig from '../Config/DebugConfig'
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import RootContainer from './RootContainer'
import createStore from '../Redux'
import {MenuProvider} from "react-native-popup-menu";
import ReactNativeExamples from "../../rn";

// create our store
const store = createStore()

/**
 * Provides an entry point into our application.  Both index.ios.js and index.android.js
 * call this component first.
 *
 * We create our Redux store here, put it into a provider and then bring in our
 * RootContainer.
 *
 * We separate like this to play nice with React Native's hot reloading.
 */
class App extends Component {
  render () {
    return (
      <MenuProvider>
        <Provider store={store}>
          <RootContainer />
          <ReactNativeExamples/>        // <=== When I insert this line
        </Provider>
      </MenuProvider>
    )
  }
}
// allow reactotron overlay for fast design in dev mode
export default DebugConfig.useReactotron
  ? console.tron.overlay(App)
  : App

Note

This error only occurs when I include the crypto example given in reactivify. If I remove it, then I get another error which is:

invariant violation: React.children.only: expected to receive a single react element child

Stacktrace

photo_2018-01-25_07-42-55

I also want to clarify, do we have to manually install the node modules using npm that are being used in the project? For example, If I'm using crypto, I'll do npm i crypto-browserify, and the transformer will automatically convert that crypto into "react readable"?

    [require('babel-plugin-rewrite-require'), {
      aliases: {
        constants: 'constants-browserify',
        crypto: 'crypto-browserify',
        dns: 'node-libs-browser/mock/dns',
        domain: 'domain-browser',
        fs: 'node-libs-browser/mock/empty',
        http: 'stream-http',
        https: 'https-browserify',
        net: 'node-libs-browser/mock/net',
        os: 'os-browserify/browser',
        path: 'path-browserify',
        querystring: 'querystring-es3',
        stream: 'stream-browserify',
        _stream_duplex: 'readable-stream/duplex',
        _stream_passthrough: 'readable-stream/passthrough',
        _stream_readable: 'readable-stream/readable',
        _stream_transform: 'readable-stream/transform',
        _stream_writable: 'readable-stream/writable',
        sys: 'util',
        timers: 'timers-browserify',
        tls: 'node-libs-browser/mock/tls',
        tty: 'tty-browserify',
        vm: 'vm-browserify',
        zlib: 'browserify-zlib',

        // You can add your own, much like webpack aliases:
        'corporate-lib': 'corporate-lib-react-native',

        // You can also mock any libraries that you don't need to support on
        // React Native, but have to be present for 3rd party code to work:
        'some-third-party-dependency': 'node-libs-browser/mock/empty',
      },
bitabs commented 6 years ago

I fixed it lads.