I'm using the swiper js library in my project. Where I want to show the product thumbnail gallery on page load and the same gallery thumbnail in modal but it's not working properly. I'm getting an error
Uncaught TypeError: Cannot set properties of undefined (setting 'control')
How can I fix it?
I've changed my code by following some suggestions on git but still, it's the same.
error message
I was looking for the same thing and I forgot to add 'Controller' it to my JS import.
So I added it like this:
import Swiper, { Autoplay, Navigation, Pagination, Controller, EffectFade, } from 'swiper';
Swiper.use([Autoplay, Navigation, Pagination, Controller, EffectFade]);
But not sure if this is your problem without seeing some code.
Related
This happens whenever I navigate to a new Story within the Storybook Navigator. Thanks!
ExceptionsManager.js:126 Unhandled JS Exception: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HooksContext'
| property 'currentContext' -> object with constructor 'Object'
--- property 'hooks' closes the circle
I'm using React Native 0.61.5 and #storybook/react-native 5.3.9
I'm dealing with the same issue and unfortunately don't have enough experience with Storybook or React Native to diagnose.
However, I was able to patch the module as described in https://github.com/storybookjs/storybook/issues/9294, i.e. "hooks.currentContext = Object.assign({}, context, { hooks: null });"
To reiterate, this is not a perfect solution, as the original bug comes from the nested, circular relationship between currentContext and hooks. This simply sets hooks to null to terminate the circular structure.
In my case, setting onDeviceUI to false solves this issue when I use storybook web UI.
storybook/index
const StorybookUIRoot = getStorybookUI({
asyncStorage: require('#react-native-community/async-storage').AsyncStorage,
onDeviceUI: false,
shouldPersistSelection: true,
shouldDisableKeyboardAvoidingView: true,
// isUIHidden: true,
})
I have Navigation component in my nuxt application and it use window object and I know it has problem with SSR.
I have imported this component in default layout. But I commented this component in default.vue layout, but still gives error and freezing!
error message:
window is not defined
I'm confused.
Try it with this:
if (process.client) {
// put your code that should be executed on the client side here
}
I am using this.props.navigator.push method in react native. That was working fine but now i am getting error "Cannot read property 'navigator' of undefined"
this.props.navigator.push({
screen: "awesome-Projects.DashBoardScreen",
title: "Dash Board"
});
Expected Result: Go to Dash Board
Actual result: remain on same page
This is because your this.props is undefined.Mostly it is caused by that this is directed to another scope.
I have implemented firebase cloud messaging in my app successfully. But when a new notification appears, my app should open and then redirect to the notifications page from app.js.
The app is showing log info when the notification is clicked but when I try this.props.navigator.push("Notification"); in that function, it shows an error undefined is not an object(evaluating this.props.navigation.push)
I am guessing this is because I haven't yet initialised my stacknavigator but I don't know this for sure. I am using react-navigation in my app.
Here is the function in my app.js that gets called when the notification is clicked.
const notificationOpen = await firebase.notifications().getInitialNotification();
if (notificationOpen) {
const { title, body } = notificationOpen.notification;
console.log('getInitialNotification:');
this.props.navigator.push("Notification");
}
Also, the navigation code is not working even in my render function in app.js so I think props is not initialised in app.js.
Can anyone help me fix this and land me to the notification page?
Considering you have a route called Notification in your stack navigator and also your app.js has access to the navigator's navigation prop, then you might want to use this.props.navigation.navigate('Notification') in case you are using react-navigation.
The problem with your code is this.props.navigation doesn't have any method called push so it will surely give an undefined error. To know more about navigation prop consider going through this doc.
[edit - I thought I was using Hot Reloading, but I am actually using Live Reload]
I have a native plugin that needs to do some clean up each time it is finished with. Basically I want to prevent these errors:
Calling JS function after bridge has been destroyed: RCTDeviceEventEmitter.emit(..)
componentWillUnmount() doesn't get called.
Live reloading will restart the app and load the app back to the initial route when a file changes. ComponentWillUnmount won't be called.
When you reload, what happens behind the scenes is that the react context is getting destroyed, and a new one is being created.
That error get's thrown whenever a Native Module is trying to do work, by using the old react context.
You could use something like this:
Error Boundary in react
Just wrap the error prone code inside the ErrorBoundary component, e.g.
<ErrorBoundary><childComponentCausingError></ErrorBoundary>
And in the ErrorBoundary component, you could just catch the error in componentDidCatch = (error, info) => {
}
componentDidCatch() is a lifecycle method in React.