Node with GraphQL and React Require not defined - create-react-app

I am developing a Node with GraphQL backend and just started working on the front end with create-react-app.
It was going well until I added this code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
const client = new ApolloClient({
uri: 'http://localhost:4444/graphql'
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>, document.getElementById('root'));
The Apollo code is what broke it to where it is telling me require is not defined. I understand the error to be concerning the utilization of require statements on the browser side which I am not.

I am getting this error because I did not install all the preset packages I was supposed to install apparently.
I initially installed:
npm install react-apollo apollo-boost jwt-decode
When I should have installed:
npm install react-apollo apollo-boost jwt-decode graphql-tag graphql --save
Once I did so, the error went away. All I can say is that graphql-tag and graphql has some dependencies for apollo-boost and react-apollo I imagine.

Related

I got this error but no idea where is the problem "Cant find the variable SafeAreaProvider"?

Got this error when try running npm run android.
Component Exception
Can't find variable SafeAreaProvider in files App.js and navigation/index.js.
I dont even have SafeAreaProvider included or used in the files. It looks strange to me, any ideas ?
App.js
import React from 'react';
import Providers from './navigation';
const App = () => {
return (
<Providers/>);
}
export default App;
navigation/index.js
import React from 'react';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';
const Providers = () => {
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
}
export default Providers;
Apart from installing npm install #react-navigation/native, you will also need to install its dependencies, which you can do by running npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view.
If we are supposed to implement the navigation in the react-native application we must have to install all the libraries described in the npm documentation.
So be sure that you have installed all the peer-dependencies and followed the documentation properly.
for the stack navigation implementation, we must have to install the following libraries as per the documentation.
#react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
#react-native-community/masked-view
#react-navigation/stack
for more information check out the official documentation to crash the issue.
https://reactnavigation.org/docs/getting-started

`unable to resolve module #react-native-community/async-storage` broke down my React Native environment

I'm basically having the issue same as here.
https://github.com/firebase/firebase-js-sdk/issues/1899
How I got this error
Since AsyncStorage is deprecated, I tried to install #react-native-community/async-storage following the official documentation
But it failed completely as I got the error above.
Thus I wanted to roll back to my previous working version except none of what I did worked.
None of these solved my problem
4 commands suggested on the error screen
undoing yarn add with yarn remove
I also did npm install #react-native-community/async-storage, did not work.
3.5 so I did npm uninstall #react-native-community/async-storage It was removed, but roll-back did not work.
Re-installing the react-native-cli
Re-creating a completely new project from scratch, but it is still giving the same error.
I could not find a solution for this. Please help.
If it's on iOS you probably forgot to do pod install.
Paste this inside ios/Podfile:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
then just do cd ios && pod install
EDIT.
I createad a project from scratch, this are the steps i did to make asyncStorage run on iOS and Android:
1) react-native init AsyncTest
2) npm i #react-native-community/async-storage
(trying to use asyncStorage during this step shows error, but works on Android)
3) Pasted inside Podfile this pod:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
4) From terminal, assuming you are in the project folder do cd ios and pod install
5) Project run succesfully on iOS and works.
react-native version was 0.60.4
This is how the project test App.js was for the test:
import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
return (
<View>
<AsyncStorageTest />
</View>
);
};
export default App
And AsyncStorageTest is:
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '#react-native-community/async-storage';
export class AsyncStorageTest extends Component {
constructor(props) {
super(props)
this.state = {
storedData: "myValue"
}
}
storeData = async () => {
console.log("inside storeData")
try {
await AsyncStorage.setItem('Test', 'TestValue')
} catch (e) {
console.log(e)
}
}
getData = async () => {
console.log("inside getData")
try {
const value = await AsyncStorage.getItem('Test')
this.setState({ storedData: value })
} catch (e) {
// error reading value
}
}
render() {
return (
<View style={{ marginTop: 40 }}>
<Text> {this.state.storedData}</Text>
<Button title={"storeData"} onPress={this.storeData}></Button>
<Button title={"getData"} onPress={this.getData}></Button>
</View>
)
}
}
export default AsyncStorageTest
Tested and worked, see if you missed something.
Make sure the that #react-native-community/async-storage is unlinked from your project.
Somehow the path to the package got changed.
This helped me:
import AsyncStorage from '#react-native-async-storage/async-storage';
For someone like me please double-check this as well:
When you install npm i #react-native-community/async-storage you should import it as import AsyncStorage from '#react-native-community/async-storage'; and DO NOT import is as import AsyncStorage from '#react-native-async-storage/async-storage';
after i run npm install react-native-dotenv
i take this error,
then i rerun npm install;
cd ios;pod install;cd ..;
and then close the terminal and uninstall app from phone,and restart them,it's works.
my version "react": "16.9.0",
"react-native": "0.61.5",
I solved this issue by installing #react-native-community/async-storage aliased to #react-native-async-storage/async-storage
The command was
yarn add #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
or
npm install --save #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
I solved this issue following the import...
import {AsyncStorage} from 'react-native';
When you install npm install #react-native-community/async-storage
You could import => import AsyncStorage from '#react-native-community/async-storage';
Dont import this => import AsyncStorage from '#react-native-async-storage/async-storage';

Unable to resolve module 'react-redux'...module 'react-redux' does not exist in haste module map

The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.
Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.
Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache
I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.
This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk
I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.

Including paypal-rest-sdk in react-native project produces an error

When I import Paypal-Rest-SDK and try running:
react-native run-android
An error occurs:
"undefined is not a function(evaluating 'r(d[9]).configure')"
Before this error occurred, I deleted the node_modules folder and reinstalled all modules again, because I had a similar error with "evaluating process.versions.openssl". when I call node -p process.versions, the following is printed:
{ http_parser: '2.8.0',
node: '8.12.0',
v8: '6.2.414.66',
uv: '1.19.2',
zlib: '1.2.11',
ares: '1.10.1-DEV',
modules: '57',
nghttp2: '1.32.0',
napi: '3',
openssl: '1.0.2p',
icu: '60.1',
unicode: '10.0',
cldr: '32.0',
tz: '2017c' }
and my Code is the following for using the paypal-sdk:
'use strict';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableHighlight, Linking} from 'react-native';
var paypal = require('paypal-rest-sdk');
paypal.configure({
mode: 'sandbox', // Sandbox or live
client_id: 'x',
client_secret: 'y'});
export default class Paypal extends Component{
constructor(props)
{
super(props);
console.log(process);
}
render()
{
return(
<View>
<Text>This is gonna be a PayPal Thing</Text>
</View>
);
}
}
I hope someone can help me. I've googled almost the entire day for this issue.
UPDATE :
The Problem is not the include of the paypal-rest-sdk, but the next line when I try to configure the paypal variable. The error dissapears when I comment them out ...but as far as I know it is necessary to configure that
Update No.2
After running
npm install --save paypal-rest-sdk
I'm back at the problem
undefined is not an object (evaluating 'process.versions.openssl')
You are using paypal-rest-sdk which is NodeJS PayPal SDK, I belive it is not compatible with React Native. I suggest to try something React Native specific like
https://www.npmjs.com/package/react-native-paypal-wrapper
https://www.npmjs.com/package/react-native-paypal
Or use plain PayPal rest API https://developer.paypal.com/docs/api/overview/#api-requests

vuetify says that This dependency was not found

I got an error when building a vue-cli app with vuetify framework.
This dependency was not found:
* vuetify/es5/components/VCardTitle in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/es5/components/VCardTitle
When I try to install it it says:
error Received malformed response from registry for undefined. The registry may be down.
Any ideas what it could be?
package json: "vuetify": "^1.1.12"
Im using vuetify a-la-carte.
I have also added VCardTitle to the vuetify.js file in imports and components.
You're importing from 'vuetify' as it is in Vue Official Documentation example (https://v1.vuetifyjs.com/en/guides/a-la-carte).
Change it to 'vuetify/lib'.
Example:
import {
Vuetify, // required
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
transitions,
} from 'vuetify/lib';