I am trying to implement react-select in my project.
My code is here: https://gist.github.com/BikalNepal/9172b3161abfa545cc5748055c6584c6
The data for search is being fetched using graphql and relay from a backend nodejs server, when I type into the box, it fetches the data properly but when I click on the data, I get the following errors:
Option selected: {value: "stark#gmail.com", label: "rickon"}// Selected data is okay
Error:
react-select.esm.js?acac:1224 Uncaught TypeError: str.replace is not a function
at trimString (react-select.esm.js?acac:1224)
at Object.eval [as filterOption] (react-select.esm.js?acac:1246)
at Select.filterOption (react-select.esm.js?acac:3952)
at toOption (react-select.esm.js?acac:4038)
at options.reduce.render (react-select.esm.js?acac:4092)
at Array.reduce (<anonymous>)
at Select.buildMenuOptions (react-select.esm.js?acac:4071)
at Select.componentWillReceiveProps (react-select.esm.js?acac:3575)
at callComponentWillReceiveProps (react-dom.development.js?cada:11395)
at updateClassInstance (react-dom.development.js?cada:11605)
trimString # react-select.esm.js?acac:1224
(anonymous) # react-select.esm.js?acac:1246
filterOption # react-select.esm.js?acac:3952
toOption # react-select.esm.js?acac:4038
options.reduce.render # react-select.esm.js?acac:4092
buildMenuOptions # react-select.esm.js?acac:4071
componentWillReceiveProps # react-select.esm.js?acac:3575
callComponentWillReceiveProps # react-dom.development.js?cada:11395
updateClassInstance # react-dom.development.js?cada:11605
updateClassComponent # react-dom.development.js?cada:14648
beginWork # react-dom.development.js?cada:15598
performUnitOfWork # react-dom.development.js?cada:19266
workLoop # react-dom.development.js?cada:19306
callCallback # react-dom.development.js?cada:149
invokeGuardedCallbackDev # react-dom.development.js?cada:199
invokeGuardedCallback # react-dom.development.js?cada:256
replayUnitOfWork # react-dom.development.js?cada:18532
renderRoot # react-dom.development.js?cada:19422
performWorkOnRoot # react-dom.development.js?cada:20296
performWork # react-dom.development.js?cada:20208
performSyncWork # react-dom.development.js?cada:20182
interactiveUpdates$1 # react-dom.development.js?cada:20449
interactiveUpdates # react-dom.development.js?cada:2170
dispatchInteractiveEvent # react-dom.development.js?cada:4882
react-dom.development.js?cada:17071
The above error occurred in the <Select> component:
in Select (created by StateManager)
in StateManager (created by CustomerSearch)
in div (created by FormGroup)
in FormGroup (created by CustomerSearch)
in div (created by Col)
in Col (created by CustomerSearch)
in div (created by CustomerSearch)
in CustomerSearch (created by Relay(CustomerSearch))
in Relay(CustomerSearch) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in CustomerSearchPage (created by ProductPerformance)
in div (created by Row)
in Row (created by ProductPerformance)
in div (created by Container)
in Container (created by ProductPerformance)
in div (created by ProductPerformance)
in ProductPerformance (created by Relay(ProductPerformance))
in Relay(ProductPerformance) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in ProductPerformancePage (created by Route)
in Route (created by RoutePage)
in div (created by RoutePage)
in Router (created by HashRouter)
in HashRouter (created by RoutePage)
in RoutePage (created by App)
in div (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
What could be the issue here?
Here you're making a reference to an event constant that you never declare. Below your code fixed. See on props onInputChange and onKeyDown you have to call event before sending it.
<Select
value={selectedOption}
onChange={this.handleChange}
options={this.state.options}
// onKeyDown={event => this.handleRefetch(event)}
onInputChange={event => this.handleInput(event)}
inputValue={this.state.value}
/>
Related
I'm trying to use konva js in my react app and here is the version details
package.json
"react": "^16.8.6",
"react-dom": "^16.8.6",
"konva": "^8.4.2",
"react-konva": "^18.2.3",
min code to recreate error
import { Stage } from "react-konva"
<Stage></Stage>
upon adding stage getting the below error. But, with plain java-script way i.e without using react-konva wrapper we can use it.
index.js:78 Uncaught Error: its-fine: useFiber must be called within a <FiberProvider />!
at useFiber (index.js:78:11)
at useContextBridge (index.js:135:17)
at StageWrap (ReactKonvaCore.js:64:85)
at renderWithHooks (react-dom.development.js:14803:18)
at mountIndeterminateComponent (react-dom.development.js:17482:13)
at beginWork (react-dom.development.js:18596:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
at invokeGuardedCallback (react-dom.development.js:292:31)
at beginWork$1 (react-dom.development.js:23203:7)
useFiber # index.js:78
useContextBridge # index.js:135
StageWrap # ReactKonvaCore.js:64
renderWithHooks # react-dom.development.js:14803
mountIndeterminateComponent # react-dom.development.js:17482
beginWork # react-dom.development.js:18596
callCallback # react-dom.development.js:188
invokeGuardedCallbackDev # react-dom.development.js:237
invokeGuardedCallback # react-dom.development.js:292
beginWork$1 # react-dom.development.js:23203
performUnitOfWork # react-dom.development.js:22154
workLoopSync # react-dom.development.js:22130
performSyncWorkOnRoot # react-dom.development.js:21756
eval # react-dom.development.js:11089
unstable_runWithPriority # scheduler.development.js:653
runWithPriority$1 # react-dom.development.js:11039
flushSyncCallbackQueueImpl # react-dom.development.js:11084
workLoop # scheduler.development.js:597
flushWork # scheduler.development.js:552
performWorkUntilDeadline # scheduler.development.js:164
react_devtools_backend.js:4012 The above error occurred in the <StageWrap> component:
in StageWrap (created by ForwardRef)
in FiberProvider (created by ForwardRef)
in ForwardRef (created by Canvas)
in div (created by Canvas)
in Canvas (created by Connect(Canvas))
in Connect(Canvas) (created by VideoCanvas)
in div (created by VideoCanvas)
in div (created by VideoCanvas)
in VideoCanvas (created by Connect(VideoCanvas))
in Connect(VideoCanvas) (created by VideoAnnotation)
in div (created by VideoAnnotation)
in Provider (created by VideoAnnotation)
in VideoAnnotation (created by TagArea)
in div (created by TagArea)
in div (created by TagArea)
in TagArea (created by Connect(TagArea))
in Connect(TagArea) (created by withRouter(Connect(TagArea)))
in withRouter(Connect(TagArea)) (created by UserTasks)
in Suspense (created by UserTasks)
in div (created by UserTasks)
in div (created by UserTasks)
in div (created by UserTasks)
in div (created by UserTasks)
in ThemeProvider (created by UserTasks)
in UserTasks (created by Form(UserTasks))
in Form(UserTasks) (created by Connect(Form(UserTasks)))
in Connect(Form(UserTasks)) (created by ReduxForm)
in ReduxForm (created by Connect(ReduxForm))
in Connect(ReduxForm) (created by withRouter(Connect(ReduxForm)))
in withRouter(Connect(ReduxForm)) (created by RouterContext)
in div (created by AdminApp)
in div (created by AdminApp)
in AdminApp (created by Connect(AdminApp))
in Connect(AdminApp) (created by withRouter(Connect(AdminApp)))
in withRouter(Connect(AdminApp)) (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Routes)
in Routes (created by AppContainer)
in Provider (created by AppContainer)
in InnerThemeProvider (created by ThemeProvider)
in ThemeProvider (created by ThemeProvider)
in ThemeProvider (created by AppContainer)
in AuthProvider (created by AppContainer)
in ErrorBoundaries (created by AppContainer)
in AppContainer
By downgrading version of react-konva I can make it work but If I want the latest version of konva then how to deal with this?
react-konva version 18.2.3 doesn't work with react version 16.8.6.
You have two options:
Downgrade react-konva:
npm install react-konva#16
Or upgrade react and react-dom to the latest (I recommend doing this).
npm istall react#latest react-dom#latest
Whenever I refresh my page after inserting the Draggable component, my page stops rendering and the HTML root element no longer has any children. I've tried putting it in the primary App component and still get the same error below in the console.
import React from 'react'
import Draggable from 'react-draggable';
import './Styles.css';
function Card() {
return (
<Draggable>
<div className='SCard'>
<div>Text</div>
</div>
</Draggable>
)
}
export default Card
react-dom.development.js:4303 Uncaught Error: Unable to find node on an unmounted component.
at findCurrentFiberUsingSlowPath (react-dom.development.js:4303:1)
at findCurrentHostFiber (react-dom.development.js:4465:1)
at findHostInstanceWithWarning (react-dom.development.js:25389:1)
at Object.findDOMNode (react-dom.development.js:26067:1)
at DraggableCore.findDOMNode (DraggableCore.js:389:1)
at DraggableCore.componentDidMount (DraggableCore.js:352:1)
at commitLayoutEffectOnFiber (react-dom.development.js:23305:1)
at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)
at commitLayoutEffects_begin (react-dom.development.js:24674:1)
at commitLayoutEffects (react-dom.development.js:24612:1)
findCurrentFiberUsingSlowPath # react-dom.development.js:4303
findCurrentHostFiber # react-dom.development.js:4465
findHostInstanceWithWarning # react-dom.development.js:25389
findDOMNode # react-dom.development.js:26067
findDOMNode # DraggableCore.js:389
componentDidMount # DraggableCore.js:352
commitLayoutEffectOnFiber # react-dom.development.js:23305
commitLayoutMountEffects_complete # react-dom.development.js:24688
commitLayoutEffects_begin # react-dom.development.js:24674
commitLayoutEffects # react-dom.development.js:24612
commitRootImpl # react-dom.development.js:26823
commitRoot # react-dom.development.js:26682
finishConcurrentRender # react-dom.development.js:25981
performConcurrentWorkOnRoot # react-dom.development.js:25809
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <DraggableCore> component:
at DraggableCore (http://localhost:3000/static/js/bundle.js:72974:5)
at Draggable (http://localhost:3000/static/js/bundle.js:72264:5)
at StressCard
at div
at div
at div
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Surprisingly, I haven't found anyone else reporting this problem as it just works upon implementation. Any help is appreciated (please be very specific as I'm quite new to web dev), thanks!
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
When I follow instruction given by https://towardsdatascience.com/deep-learning-for-detecting-objects-in-an-image-on-mobile-devices-7d5b2e5621f9
I get next error on Android devices when try to detect obj.
Warning: Each child in a list should have a unique "key" prop.%s%s See https://fb [dot] me/react-warning-keys for more information.%s,
Check the render method of `CocoSsdScreen`., ,
in RCTView (at CocoSsdScreen.js:125)
in CocoSsdScreen (at SceneView.tsx:98)
in StaticContainer
in StaticContainer (at SceneView.tsx:89)
in EnsureSingleNavigator (at SceneView.tsx:88)
in SceneView (at useDescriptors.tsx:125)
in RCTView (at BottomTabView.tsx:42)
in SceneContent (at BottomTabView.tsx:127)
in RCTView (at ResourceSavingScene.tsx:44)
in RCTView (at ResourceSavingScene.tsx:27)
in ResourceSavingScene (at BottomTabView.tsx:122)
in RCTView (at screens.native.js:132)
in ScreenContainer (at BottomTabView.tsx:106)
in RCTView (at BottomTabView.tsx:105)
in SafeAreaProviderCompat (at BottomTabView.tsx:104)
in BottomTabView (at createBottomTabNavigator.tsx:41)
in BottomTabNavigator (at BottomTabNavigator.js:19)
in BottomTabNavigator (at SceneView.tsx:98)
in StaticContainer
in StaticContainer (at SceneView.tsx:89)
in EnsureSingleNavigator (at SceneView.tsx:88)
in SceneView (at useDescriptors.tsx:125)
in RCTView (at CardContainer.tsx:199)
in RCTView (at CardContainer.tsx:198)
in RCTView (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:526)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:508)
in PanGestureHandler (at GestureHandler.native.tsx:13)
in PanGestureHandler (at Card.tsx:502)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:498)
in RCTView (at Card.tsx:492)
in Card (at CardContainer.tsx:164)
in CardContainer (at CardStack.tsx:497)
in RCTView (at Screens.tsx:70)
in MaybeScreen (at CardStack.tsx:490)
in RCTView (at Screens.tsx:48)
in MaybeScreenContainer (at CardStack.tsx:388)
in CardStack (at StackView.tsx:433)
in KeyboardManager (at StackView.tsx:431)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at App.js:53)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
in ThemeProvider (at NavigationContainer.tsx:63)
in ForwardRef(NavigationContainer) (at App.js:52)
in RCTView (at App.js:50)
in App (at withExpoRoot.js:26)
in ExpoRoot (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in DevAppContainer (at AppContainer.js:115)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
- node_modules\react\cjs\react.development.js:172:36 in warningWithoutStack
- node_modules\react\cjs\react.development.js:612:32 in warning
- node_modules\react\cjs\react.development.js:1723:14 in validateExplicitKey
- node_modules\react\cjs\react.development.js:1745:28 in validateChildKeys
- node_modules\react\cjs\react.development.js:1962:24 in createElementWithValidation
* screens\CocoSsdScreen.js:171:12 in render
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:13042:21 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12970:4 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20459:25 in beginWork$$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7799:17 in classComponentUpdater.enqueueSetState
- node_modules\react\cjs\react.development.js:325:31 in Component.prototype.setState
* http://packager.dt-ayw.anonymous.objects-detection.exp.direct/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:145260:31 in _callee2$
- node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
- node_modules\regenerator-runtime\runtime.js:274:30 in invoke
- node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
- node_modules\regenerator-runtime\runtime.js:135:28 in invoke
- node_modules\regenerator-runtime\runtime.js:145:19 in PromiseImpl.resolve.then$argument_0
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
Running application on FIG-LX1.
Exception Error: [TypeError: Network request failed]
Exception Error: [TypeError: Network request failed]
I tired to fix in next way at file /screens/CocoSsdScreen.js line 125
changed in
<View key={index} style={styles.welcomeContainer}>
<Text style={styles.text}>
but it didn't work. Could anyone please help me.
p.s. Git repo is at:
https://github.com/yzzhang/machine-learning/tree/master/mobile_apps/objects_detection
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.