Component names need to start with capital letter? - javascript

So I am trying to use this https://github.com/seeden/react-facebook as part of my hybrid react app. However when I copy and paste the code into my project it gives me an error
import React, {Component } from 'react';
import { FacebookProvider, Page } from 'react-facebook';
//import {createBottomTabNavigator, createAppContainer} from 'react-
navigation';
export default class Home extends Component {
render(){
//const { navigate } = this.props.navigation
return (
<FacebookProvider appId="2319566588264121">
<Page href="https://www.facebook.com/somepage/" tabs="timeline"
/>
</FacebookProvider>
);
}
}
The idea is to have a facebooks pages feed show up on my app screen. However I get this error:
Invariant Violation: View config not found for name div. Make sure to start component names with a capital letter.
This error is located at:
in div (created by Page)
in Page (created by Parser)
in Initialize (created by Context.Consumer)
in ForwardRef (created by Parser)
in div (created by Parser)
in Parser (created by ForwardRef)
in ForwardRef (at Home.js:18)
in Facebook (at Home.js:17)
in Home (at SceneView.js:0)
in SceneView (at createTabNavigator.js139)
in RCTView (at View.js:45)
in View (at ResourceSavingScene.js:37)
in RCTView (at View.js:45)
in View (at ResourceSavingScene.js:26)
in ResourceSavingScene (at createllottomTabNavigatorls:121)
in RCTView (at View.js:45)
in View (at screens.native.js:83)
in ScreenContainer (at create00ttomTabNavigator.js:111)
in RCTView (at View.js:46)
in View (at createBottomTabNavigator.js: 110)
in TabNavigationView (at createTabNavigator.js:197)
in NavigationView (at createNavigator.js:61)
in Navigator (at createAppContainer.js:429)
in NavigationContainer (at . .


It looks like seeden/react-facebook is built for browsers and the DOM. You cannot use <div> and the likes in React Native -- This means you have to implement this library yourself, or find something else that is React Native compatible


Yes,components' names must start with capital letter , because , when you write component name with small letter , compiler runs it like as html tag, but when you write with capital letter , compiler runs it from your javascript file location.

Related

RCTView generated view config for bubblingEventTypes does not match native, missing

RCTView generated view config for bubblingEventTypes does not match native, missing: topPointerOver topPointerLeave topPointerMove topPointerEnter topPointerUp topPointerDown topPointerOut topPointerCancel

Element type is invalid: expected a string but got undefined, check the render method of AnimatedComponent - ReactNavigation

I'm stucking a couple of days with ReactNavigation v6+, also there are several similar questions/answers about the invalid element type, but none of them is working with this simple example:
The issue was started after adding the material-top-tap navigation from #react-navigation module.
To avoid complexity, I use the minimal needed code lines to reproduce this error:
import React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createMaterialTopTabNavigator} from '#react-navigation/material-top-tabs';
const TopBarOne = () => (
<View>
<Text>TOP BAR ONE</Text>
</View>
);
const TopBarTwo = () => (
<View>
<Text>TOP BAR TWO</Text>
</View>
);
const TopTabBar = createMaterialTopTabNavigator();
const TopBarStack = () => {
return (
<TopTabBar.Navigator>
<TopTabBar.Screen name={'one'} component={TopBarOne} />
<TopTabBar.Screen name={'two'} component={TopBarTwo} />
</TopTabBar.Navigator>
);
};
const NavigationProvider = () => {
return (
<NavigationContainer>
<TopBarStack />
</NavigationContainer>
);
};
export default NavigationProvider;
The complete error log:
ERROR Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `AnimatedComponent`.
This error is located at:
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (at PagerViewAdapter.tsx:123)
in PagerViewAdapter (at TabView.tsx:79)
in RCTView (at View.js:32)
in View (at TabView.tsx:78)
in TabView (at MaterialTopTabView.tsx:47)
in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:136)
in Unknown (at createMaterialTopTabNavigator.tsx:135)
in MaterialTopTabNavigator (at testProvider.tsx:23)
in TopBarStack (at testProvider.tsx:33)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at testProvider.tsx:32)
in NavigationProvider (at App.tsx:17)
in App (at hatman/index.tsx:22)
in Root (at CodePush.js:585)
in CodePushComponent (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
package versions:
"react": "17.0.2",
"react-native": "0.67.2",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"react-native-gesture-handler": "^2.4.0",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-paper": "^4.12.0",
"react-native-tab-view": "^3.1.1",
targeted device:
Android

Thanks for the snack.expo.dev's notifications which lead to solving my issue.
The snack will notice me that some third-library packages version are not compatible with the navigation, so I've changed some packages version and it's working well.
Old modules version (which cause the problem):
"react-native-screens": "^3.13.1",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-safe-area-context": "^4.1.4",
New modules version:
"react-native-screens": "^3.8.0",
"react-native-pager-view": "^5.4.6",
"react-native-safe-area-context": "^3.3.2",
No need to downgrade or change any navigation sub-modules version.

Invalid attempt to destruction non-iterable instance with useState for conditional rendering

Been banging on this for about 4 hours, literally. I keep getting the error:
Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
I am trying to conditionally render components based on whether or not a user is logged in. Here is my code
const App = () => {
const [isLoggedIn, setIsLoggedIn] = React.useState(false);
const AppBody = () => {
return (
<NavigationContainer>
<Stack.Navigator>
{isLoggedIn ? (
<Stack.Screen
name="Initiation"
component={Initiation}
options={{headerShown: false}}
/>
) : (
<>
<Stack.Screen
name="Activities"
component={Activities}
options={{headerShown: false}}
/>
<Stack.Screen
name="Messages"
component={Messages}
options={{headerShown: false}}
/>
<Stack.Screen
name="Persona"
component={Persona}
options={{headerShown: false}}
/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
React.useEffect(() => {
AppBody();
}, [isLoggedIn]);
return <AppBody />;
};
export default App;
This logic was rendering fine until today when I started getting the error above. I have tried several different solutions, including returning the conditional logic straight in App.js body instead of the AppBody.js body, and I have also tried reordering the code several times over.
At this point, I know I am missing something in plain sight. I am just at a loss for what it is.
EXTRA
xCode 12.4
React-Native 0.63
ERROR STACK
This error is located at:
in Activities (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:620)
in RCTView (at View.js:34)
in View (at Screens.tsx:84)
in MaybeScreen (at CardStack.tsx:613)
in RCTView (at View.js:34)
in View (at Screens.tsx:54)
in MaybeScreenContainer (at CardStack.tsx:495)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at App.js:24)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:23)
in AppBody (at App.js:59)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

The error was in my activities file. I had an object I was destructuring that looked like:
const [var1, var2] = {
key: value
};
I stupidly left this code unfinished and did not know it was causing the error because I did not read the error stack. I spent 4 hours tweaking the wrong file. Lesson - always read the error stack.

The error you are mentioning is not happening in this component, could you please paste the error stack?

You should not use <Link> outside a <Router> in Piral

I get this error when debugging my pilet inside the default Piral instance:
Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
The weird thing is the next log entry reports that the error is coming from inside a Router:
react_devtools_backend.js:2430 The above error occurred in the <Context.Consumer> component:
in Link
in Unknown
in Suspense (created by ErrorBoundary)
in ErrorBoundary
in Unknown (created by Menu)
in li (created by MenuItem)
in MenuItem
in Unknown (created by Menu)
in ul (created by MenuContainer)
in div (created by MenuContainer)
in div (created by MenuContainer)
in nav (created by MenuContainer)
in header (created by MenuContainer)
in MenuContainer
in Unknown (created by Menu)
in Menu (created by Layout)
in div (created by Layout)
in Layout
in Unknown (created by PiralContent)
in PiralContent (created by PiralView)
in Router (created by BrowserRouter)
in BrowserRouter
in Unknown (created by PiralView)
in PiralProvider (created by PiralView)
in PiralView (created by Piral)
in Piral
My pilet index.jsx:
import { Link } from 'react-router-dom'
const App = () => 'My pilet'
export function setup(app) {
app.registerPage('/my-pilet', App)
app.registerMenu(() => <Link to="/my-pilet">My Pilet</Link>)
}
My Piral instance uses the boilerplate provided by piral-cli and is completely unchanged. It even has a default menu item that works correctly without an error:
(the "Not Found" is the default menu item provided by Piral)
Why am I getting this error?
Piral 0.12.4
Piral CLI 0.12.4
Piral CLI Webpack 0.12.4

Something must be wrong with your setup. If this error appears it means that your Link has a different routing context than the one from the app shell. My suspicion is that you do not share react-router-dom. Put this in the peerDependencies of the package.json of your pilet.

The error is self explanatory, you just need to enclose <Link .. /> with Router tags. Try this:
import { BrowserRouter as Router, Link } from 'react-router-dom'
const App = () => 'My pilet'
export function setup(app) {
app.registerPage('/my-pilet', App)
app.registerMenu(() => <Router> <Link to="/my-pilet">My Pilet</Link> <Router>)
}
Source: https://reactrouter.com/web/example/url-params

"Error: You may not call store.getState() while the reducer is executing."

I just upgraded my fully functional react-native app to Redux v4, but now I am getting the following error:
Error: Error: Error: Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.
I suspect the problem is that I have numerous components inside others, each with their own connect(mapStateToProps, mapDispatchToProps)(Component) and I suppose this is not the correct way to implement it, though I am not sure the proper way to go about it.
Any direction is greatly appreciated!
Stack Trace:
This error is located at:
in Connect(SideBarApp) (at SceneView.js:9)
in SceneView (at createTabNavigator.js:10)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in ResourceSavingScene (at createBottomTabNavigator.js:86)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in TabNavigationView (at createTabNavigator.js:127)
in NavigationView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at AppNavigator.js:36)
in App (created by Connect(App))
in Connect(App) (at index.ios.js:23)
in Provider (at index.ios.js:22)
in TheNewsApp (at renderApplication.js:32)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in AppContainer (at renderApplication.js:31)
This error is located at:
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at AppNavigator.js:36)
in App (created by Connect(App))
in Connect(App) (at index.ios.js:23)
in Provider (at index.ios.js:22)
in TheNewsApp (at renderApplication.js:32)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in AppContainer (at renderApplication.js:31)
This error is located at:
in NavigationContainer (at AppNavigator.js:36)
in App (created by Connect(App))
in Connect(App) (at index.ios.js:23)
in Provider (at index.ios.js:22)
in TheNewsApp (at renderApplication.js:32)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in AppContainer (at renderApplication.js:31)
getState#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79579:24
runComponentSelector#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78896:56
initSelector#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79019:28
Connect(SideBarApp)#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78969:29
constructClassInstance#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20826:32
updateClassComponent#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:22393:35
performUnitOfWork#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24922:27
workLoop#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24955:47
renderRoot#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24988:21
performWorkOnRoot#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25549:23
performWork#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25481:30
performSyncWork#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25456:20
requestWork#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25362:26
scheduleWork#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25224:28
enqueueSetState#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20681:23
setState#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:2380:37
dispatch#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80901:27
navigate#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80517:24
nav#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80470:44
combination#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79810:38
dispatch#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79628:38
setLoginStatus#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112247:19
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112199:44
tryCallOne#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8818:16
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8919:27
_callTimer#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8162:17
_callImmediatesPass#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8198:19
callImmediates#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8417:33
__callImmediates#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7741:32
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7580:34
__guard#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7721:15
flushedQueue#http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7579:21
flushedQueue#[native code]
invokeCallbackAndReturnFlushedQueue#[native code]

It's an issue with the new v2.16.0 release of redux-devtools-extension.
Here's a couple of workaround while we wait for the fix...
Revert back to the working version v2.15.5 (For Chrome)
Download https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip
Extract the zip
Type chrome://extensions into the url and toggle on developer mode on the top right of the page.
The button Load Unpacked will appear. After clicking the button, select the extracted folder.
Or just simply disable your redux-devtool extension for now.
either on the browser level or through your code(where you create the redux store)
FYI: this does not solve the OP's question but does solve the issue where developers are receiving the below error message starting 11/27/18.
Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.
UPDATE
v2.16.2 has been released
For those who had previously disabled the extension, just re-enable it and Update your redux dev tools from 2.16.0 to 2.16.2 Update Redux Dev tools

In my case, I have to remove composeWithDevTools - a plugin for chrome
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
// const enhancer = composeWithDevTools(applyMiddleware(thunk))
const enhancer = applyMiddleware(thunk)
const store = createStore(reducers, enhancer);

In my project. This issue just popup from nowhere one day.
My solution: Disable the Chrome extension - Redux Devtools.
Then everything is back to normal.
So with this kind of error, you should test in several browser to find the problem.

tl;dr
Make sure you don't have any code that causes side effects in your reducers!
Pure reducers
Redux reducers need to be pure. This means they shouldn't have side effects. Side effects should go to thunks or sagas. In my case a reducer looked like this:
case REDIRECT_ON_EVENT: {
history.push('/some-route'); // side effect: redirection
return {
...state,
path: action.payload.path,
};
}
The history.push('/some-route'); part messed up state management. Removing it from the reducer and placing it to a saga that gets called on the same action type fixed the issue:
function redirectToSomeRoute() {
history.push('/some-route');
}
takeEvery(REDIRECT_ON_EVENT, redirectToSomeRoute),

Disabling chrome extension or removing composeWithDevTool from your code will work as a quick fix. But we all know that we need the extension in order to track our application state and manage it properly. So I created an issue today please support hopefully, someone from the redux team will get back to us.
Or if you are looking for a temporary workaround(for chrome), you can download https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip and then extract it to some folder.
Type chrome://extensions and turn on developer mode from top left and then click on Load Unpacked and select the extracted folder for use.
Issue: https://github.com/reduxjs/redux-devtools/issues/413

Solution That work for me
Disable the Chrome extension of Redux Dev tools. or remove logger from your code.
update: Update your redux dev tools from 2.16.0 to 2.16.1
Update Redux Dev tools.

In my case the issue was not related to dev extension. I've encountered this error while working with deep-linking - was updating route query inside reducer. Wrapping logic related to manipulating url inside settimeout fixed the error.

I had the same error with a PWA build with polymer 3.
The store.js also tried to use the redux dev tools which I had to deactivate:
...
// Sets up a Chrome extension for time travel debugging.
// See https://github.com/zalmoxisus/redux-devtools-extension for more information.
//const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const devCompose = compose;
// Initializes the Redux store with a lazyReducerEnhancer (so that you can
// lazily add reducers after the store has been created) and redux-thunk (so
// that you can dispatch async actions). See the "Redux and state management"
// section of the wiki for more details:
// https://github.com/Polymer/pwa-starter-kit/wiki/4.-Redux-and-state-management
export const store = createStore(
state => state,
devCompose(
lazyReducerEnhancer(combineReducers),
applyMiddleware(thunk))
);
...

This is what I did: Just commented the line for Chrome Redux Devtools Extension from my store.js file.
....
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware)
///This line--> window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
....
And the issue is just begun an hour ago. As we all know the extension is very handy during development, so let us wait for the real fix from the authorities.

Should be fixed now. Update your redux dev tools from 2.16.0 to 2.16.1
https://github.com/zalmoxisus/redux-devtools-extension/issues/588#issuecomment-442396540

I had this problem on Chrome. Downgrading my version of redux from 4.0.2 to 3.7.2 fixed it for me.
npm uninstall redux
npm install redux#3.7.2

Note: I am using Saga
In my case I had added a navigation code inside a reducer.
sendOTPSuccess: (state, action) => {
state.wip = false;
RootNavigation.navigate('LoginOTPScreen');
},
In the beginning it was working but when I used/accessed state inside the called new Screen
import { useDispatch, useSelector } from "react-redux";
import * as sessionActions from "../../models/session";
const LoginOTP: () => Node = (props) => {
const session = useSelector(sessionActions.selectSession);
const dispatch = useDispatch();
...
the error popped up.
“Error: You may not call store.getState() while the reducer is executing.”
Cause
Reducer is supposed to be a pure function. It should accept a payload and modify state and nothing else. Something else is considered as a side-effect.
I my case I loaded a new component which also consumes state data and the state modification is not yet completed. This is causing the issue.
Solution
I simply moved the navigation to respective saga
// worker Saga:
function* sendOTPSaga({ payload }) {
const { phoneNumber } = payload;
try {
const response = yield call(Api.sendOtp, { phoneNumber });
if (response.status == 200) {
yield put(sessionActions.sendOTPSuccess(response.data));
RootNavigation.navigate('LoginOTPScreen'); // <---- Here
...

Categories

Resources