ReferenceError: React is not defined

[ekimlinger]

Getting the above error message when attempting to install, both when using HOC and default exported wrapper component.

File looks like this:

import React from 'react';
...other imports...
class App extends React.Component {
    render() {
        return (
            <DevMenuOnTouch>
                ...Other wrappers around my actual app...
                     ...App...
            </DevMenuOnTouch>
       )
   }
}

[pie6k]

I've added react as peerDependency in version 1.0.2. Could you try to install it and let me know if you still have this issue?

[Navyakemthur]

I have installed the version 1.0.2. Still have the issue. Getting the same error when trying to reload. "React is not defined"

My App.js file looks like this:

import React, { Component } from 'react'; import DevMenuOnTouch from 'react-native-dev-menu-on-touch';

render() { return ( <DevMenuOnTouch> ...Other wrappers around my actual app... ...App... </DevMenuOnTouch> ); } } Thanks, Navya

[ospfranco]

Having the same issue here

[pie6k]

Weird.. I'll triple check it today.

Could you show me your main package.json file?

[ospfranco]

{
  "name": "SampleApp",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "ios": "./appcenter-post-clone.sh && node node_modules/react-native/local-cli/cli.js run-ios --simulator='iPhone 6' --scheme='Debug'",
    "android": "./appcenter-post-clone.sh && node node_modules/react-native/local-cli/cli.js run-android",
    "test": "jest"
  },
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "6.1.3",
    "appcenter": "1.10.0",
    "appcenter-analytics": "1.10.0",
    "appcenter-crashes": "1.10.0",
    "moment": "2.23.0",
    "react": "16.6.3",
    "react-native": "0.58.3",
    "react-native-calendars": "1.21.0",
    "react-native-device-info": "0.24.0",
    "react-native-email-link": "^1.2.0",
    "react-native-joi": "0.0.5",
    "react-native-material-dropdown": "0.11.1",
    "react-native-material-textfield": "0.12.0",
    "react-native-modalbox": "1.7.1",
    "react-native-phone-call": "^1.0.9",
    "react-native-popup-menu": "^0.14.2",
    "react-native-swiper": "1.5.14",
    "react-native-video": "4.0.1",
    "react-navigation": "3.1.4",
    "react-redux": "6.0.0",
    "redux": "4.0.1",
    "redux-persist": "4.9.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "uuid": "3.3.2"
  },
  "devDependencies": {
    "@types/react": "16.4.16",
    "@types/react-native": "0.57.18",
    "@types/react-native-material-textfield": "0.12.2",
    "@types/react-native-swiper": "1.5.10",
    "@types/react-navigation": "2.13.8",
    "@types/react-redux": "6.0.12",
    "@types/uuid": "3.4.4",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-native-typescript-transformer": "1.2.10",
    "react-test-renderer": "16.6.3",
    "tslint": "5.11.0",
    "tslint-react": "3.6.0",
    "typescript": "3.1.1"
  },
  "jest": {
    "preset": "react-native"
  },
  "lib": {
    "externals": {
      "moment": "moment"
    }
  }
}

[pie6k]

Ok,

I required react 16.7.0 as peer dependency and you have 16.6.X.

I've lowered peer dependency of react to 16.0.0.

Version 1.0.3 should now work for your. Please let me know if it does.

Sorry for issues

[ethan-hurst]

I'm getting the same here

App.js

import React from 'react';
import { View } from 'react-native';
import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import ReduxThunk from 'redux-thunk';
import { Header } from './components/common';
import LoginForm from './components/LoginForm';
import keys from './config/keys';
import reducers from './reducers';

export default class App extends React.Component {
    componentWillMount() {
        const config = {
            apiKey: keys.apiKey,
            authDomain: keys.authDomain,
            databaseURL: keys.databaseURL,
            projectId: keys.projectId,
            storageBucket: keys.storageBucket,
            messagingSenderId: keys.messagingSenderId,
        };
        firebase.initializeApp(config);
    }

    render() {
        return (
            <DevMenuOnTouch>
                <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
                    <View>
                        <Header headerText="Login!" />
                        <LoginForm />
                    </View>
                </Provider>
            </DevMenuOnTouch>
        );
    }
}

stack trace

This error is located at:
    in DevMenuOnTouch (at App.js:28)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Stack trace:
  node_modules\react-native-dev-menu-on-touch\dist\index.js:36:16 in render
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10563:21 in finishClassComponent
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14129:41 in workLoop
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14226:15 in renderRoot
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15090:24 in performWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15047:14 in performSyncWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14925:19 in requestWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14711:16 in scheduleWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15429:15 in scheduleRootUpdate
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16142:20 in render
  node_modules\react-native\Libraries\ReactNative\renderApplication.js:59:52 in renderApplication
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:101:10 in run
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:195:26 in runApplication
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:349:47 in __callFunction
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26 in <unknown>
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

package.json

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "firebase": "^5.8.2",
    "jest-expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-polyfill": "^6.26.0",
    "eslint-config-rallycoding": "^3.2.0",
    "js-beautify": "^1.8.9",
    "react-native-dev-menu-on-touch": "^1.0.3"
  },
  "private": true
}

[ethan-hurst]

I've also just tried removing this from dependencies and adding it as a normal dependency and I"m getting the same result.

[ekimlinger]

Still getting the same error message on 1.0.3.

[ekimlinger]

Looked into this a bit. NativeModules.DevMenu is undefined. @pie6k Is this only supposed to be used in expo projects?

[DrummerSi]

Trying to use this module still results in the error above...

You can get around this: If you're coding a typescript project, simply copy the contents of the index.tsx into a file in your project, and import it as you would any other module.

[ekimlinger]

Also found out that NativeModules.DevMenu is undefined when running on Android. So even if you do copy the source into your own component it will error out on Android. Works fine for iOS, but there should be some null checking before trying to call a function that could be potentially missing.

[pie6k]

Any idea guys why it's not resolving React properly? It's defined in peer dependency. I'm not really npm guru 😿

I'm quite busy now, I'll try to add DevMenu check in free moment. Feel free to create PR, tho ;)

[Bessonov]

I've transformed

return (<react_native_1.View pointerEvents="box-none" style={{ flex: 1 }} {...panHandlers}>
        {children}
      </react_native_1.View>);

in node_modules/react-native-dev-menu-on-touch/dist/index.js into:

return react_1.createElement(react_native_1.View, {pointerEvents: 'box-none', style: { flex: 1 }, ...panHandlers}, children)

and the error disappears. It seems that it's not related directly to react, but to compilation of tsx. After that I get an error that NativeModules.DevMenu is null. Maybe it helps you guys.

My workaround is to adding

"scripts": {
	"devmenu": "adb shell input keyevent 82",
	[...]
},

to package.json and run with yarn devmenu.

[ospfranco]

Just tested this package again and it is still not working, this time with RN 0.61 (and the corresponding react version), found a stack overflow answer:

import { NativeModules } from 'react-native';

// wraps the app in a function to allow three finger dev menu access
const DevMenuTrigger = ({ children }) => {
  const { DevMenu } = NativeModules;
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => {
      if (gestureState.numberActiveTouches === 3) {
        DevMenu.show();
      }
    },
  });
  return <View style={{ flex: 1 }} {...panResponder.panHandlers}>{children}</View>;
};

const DevApp = () => (<DevMenuTrigger><App /></DevMenuTrigger>);

// export default App;
export default DevApp;

and that is working fine, maybe changing the peer dependency to react: "*" and react-native: "*" could work?

[pie6k]

I don't have a lot of time lately, so pr changing peer deps are welcome :)

[sometimescasey]

@ospfranco ty this seems like a nice solution...three finger gesture is recognized upon changing the first import statement to

import { NativeModules, PanResponder } from 'react-native';

But unfortunately this is not working for me on Android using react-native 0.61.5 - upon the three finger gesture being recognized I get TypeError: null is not an object (evaluating DevMenu.show). Is DevMenu no longer a part of NativeModules?

[ospfranco]

I don'r remember exactly, but this package does not run on android, the native dependency of the dev menu is not exposed so it was not possible to implement this functionality without touching the native code

[ospfranco]

Also be careful with it, the patch I posted, messes up react-gesture-handler... I lost a couple of days trying to figure out several screens on my app broke

[trickeyd]

Did anyone figure this out? I have made a lib with a very similar looking package.json and am getting the same error when testing in a project that has both peers installed

[trickeyd]

Hey - fixed my problem.

For anyone else reading this, I was using "module": "commonjs" in my tsconfig. Removing that fixed the issue.

[Fy1717]

Hey - fixed my problem.

For anyone else reading this, I was using "module": "commonjs" in my tsconfig. Removing that fixed the issue.

I have some problem but this suggestion was not a solution for me