Iam using Alt.js with React and getting error in HomeActions.js file HomeActions.js: Uncaught TypeError: Cannot read property 'updateUserSuccess' of undefined. Not to mention the same code was working flawlessly before i completely reinstalled node_modules.
here is the code
import alt from '../../alt';
import request from 'superagent';
class HomeActions {
constructor() {
this.generateActions(
'updateUserSuccess',
);
}
getUser() {
request
.get('api/getuser')
.end((err, res) => {
this.actions.updateUserSuccess(res.text);
});
}
}
export default alt.createActions(HomeActions);
getUser() is called in the componenetdidmount(){} function of Home.js
Also directly calling the action property from the component does work so i guess the problem is not with Alt.js or generateActions : eg
import alt from '../../alt';
class NavbarActions {
constructor() {
this.generateActions(
'updateOnlineUsers'
);
}
}
export default alt.createActions(NavbarActions);
//in Navbar.js
componentDidMount() {
NavbarStore.listen(this.onChange);
NavbarActions.updateOnlineUsers(somedata);
}
//this is working**
This question might be related to my last question about calling a function inside an instance method.
Sidenote : After updating the dependencies I also had to make changes to use RouterContext istead of RoutingContext in the server-side react-middle-ware, and to solve an issue related to that I imported browserHistory from react-router (before i was using createBroswerHistory from 'history/createBrowserHistory')
Edit 1 : I replaced this.actions.updateUserSuccess(res.text); with alt.actions.HomeActions.updateUserSuccess(res.text); and the updateUserSuccess is accessible but still getting a warning ReferenceError: An action was called but nothing was dispatched
Edit 2 : I just got to the core of the issue by using console.log(this); in the newer version and also in the older version here are the logs
Older version :
AltAction {id: "HomeActions.getTwoCharacters", actions: Object, actionDetails: Object, alt: Alt, dispatched: false}
_dispatch : ()
actionDetails :
Object actions :
Object alt :
Alt dispatched :
false id :
"HomeActions.getTwoCharacters"
__proto__ : Object
New Version
Object {GET_USER: "HomeActions.getUser", LOGOUT: "HomeActions.logout", UPDATE_USER_SUCCESS: "HomeActions.updateUserSuccess", UPDATE_USER_FAIL: "HomeActions.updateUserFail", LOGOUT_SUCCESS: "HomeActions.logoutSuccess"…}
GET_USER : "HomeActions.getUser"
LOGOUT : "HomeActions.logout"
LOGOUT_FAIL : "HomeActions.logoutFail"
LOGOUT_SUCCESS : "HomeActions.logoutSuccess"
UPDATE_USER_FAIL : "HomeActions.updateUserFail"
UPDATE_USER_SUCCESS : "HomeActions.updateUserSuccess"
getUser : action()
logout : action()
logoutFail : action()
logoutSuccess : action()
updateUserFail : action()
updateUserSuccess : action()
__proto__ : Object
Clearly there is no dispatching method in the newer version. Can somebody explain why is this so?
Related
Update today - 05.08.2020
Now the last Breadcrumb item is updating, but I still have the console error : Uncaught (in promise) Error: Can not set initial state more than once.
Does anyone had this problem ?
Old question
I am trying to create breadcrumbs in a SharePoint Online page. Whenever I go to a site page, the breadcrumbs are not updated and the last element is still the old one (not the actual one). The actual site page is loading in browser like a frame inside the site collection content.
I tried using componentDidUpdate method, but when I click on another page, it doesn't go into the method. The prevProps arg is not called and it should because the url is changed.
Example:
constructor(props: ISiteBreadcrumbProps) {
super(props);
// Initiate the component stated
this.state = {
breadcrumbItems: [],
};
}
public componentDidMount() {
//do things
this.setState({
breadcrumbItems: newBreadcrumbsList
});
}
public componentDidUpdate(prevProps, prevState) {
if (prevProps.context.pageContext.site.serverRequestPath !== this.props.context.pageContext.site.serverRequestPath) {
this.setState({
breadcrumbItems: newBreadcrumbsList
});
}
}
<Breadcrumb
items={this.state.breadcrumbItems} >
</Breadcrumb>
I have this error in console log :
Uncaught (in promise) Error: Can not set initial state more than once.
at f (chunk.vendors~sp-suite-nav-search-common_none_98b1f8b240333ccaa448.js:1)
at Module.u (chunk.vendors~sp-suite-nav-search-common_none_98b1f8b240333ccaa448.js:1)
at Module.C (chunk.sp-suite-nav-search-common_none_94cf10ffb7278a529ef1.js:1)
at sp-pages-assembly_en-us_bfc09e3768098e83385e34c646c23abe.js:1
Thanks!
For me it worked this way
Breadcrumbs file
public componentDidUpdate(prevProps: ISiteBreadcrumbProps, prevState: ISiteBreadcrumbState) {
if (prevProps!== this.props) {
this.startGeneratingBreadcrumbs();
}
}
App Customizer file # (inside onInit method)
public onInit(): Promise<void> {
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
this._renderPlaceHolders();
**//and added this inside**
this.context.application.navigatedEvent.add(this, () => {
this._addElement();
});
return Promise.resolve<void>();
}
re-render the component
After trying to start our custom developed SAPUI5 app in the fiori launchpad, we received following error message:
Error
LPD_CUST Settings:
LPD_CUST_settings
Component.js
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("***.***.***.Component", {
metadata : {
manifest: "json"
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
}
});
});
Target Mapping:
Target Mapping
Semantic Object:
Semantiv Object YCEI_BPUPLOAD_SEM exists in the Transaction /n/UI2/SEMOBJ
The App is starting as a standalone application via the index.html. But if we try to launch it on the SAP Fiori Launchpad, the error message appears.
We also tried following component.js where we entered the value of the Additional Information property in the LPD_CUST transaction but we received the same error.
jQuery.sap.declare("***.***.***.Component");
sap.ui.core.UIComponent.extend("***.***.***", {
createContent : function() {
// create root view
this.view = sap.ui.view({
id : "app",
viewName : "***.***.***.view.App",
type : sap.ui.core.mvc.ViewType.XML,
viewData : { component : this }
});
return this.view;
}
});
(*** are internal components/paths)
All hints are appreciated.
Regards,
Dominic
The error message is linking you to the controller of your application. Please make sure you instantiated the objects correctly. Maybe there is a problem with instantiating an OData Model. Check if you use "new". See syntax below:
https://ui5.sap.com/#/topic/6c47b2b39db9404582994070ec3d57a2.html
You need to use "new" when instantiating an object, for example on your second option:
this.view = new sap.ui.view({
id : "app",
viewName : "***.***.***.view.App",
type : sap.ui.core.mvc.ViewType.XML,
viewData : { component : this }
});
I don't think that's the answer to your problem, but I think it was an error and maybe it can help you somehow.
I've followed the 'naive' implementation in the project README: https://github.com/mondora/asteroid-oauth-mixin
The only difference in my code from the example is changing the arrow function to a traditional for the usage of this.
asteroid.ddp.on("added", ({collection, id, fields}: { collection: string; fields: {}, id: string }) => {
if (collection === "meteor_accounts_loginServiceConfiguration") {
asteroid.loginServiceConfiguration = {
...asteroid.loginServiceConfiguration,
[id]: {
_id: id,
...fields
}
};
}
});
});
asteroid.getServiceConfig = function(providerName: string) { // ts file
return this.loginServiceConfiguration[providerName];
}
When I do asteroid.loginWith('google')
index.ts:50 Uncaught TypeError: Cannot read property 'google' of undefined
On the meteor backend I also installed meteor add accounts-base accounts-google because I assume this is a dependency.
What am I missing? Thanks!
I've tried adding DDP.loginServiceConfiguration = {} before the snippet above which resolves the error but creates a new error.
asteroid-oauth-mixin.js:787 Uncaught TypeError: Cannot read property 'clientId' of undefined
at getOauthClientId (asteroid-oauth-mixin.js:787)
at Object.getOptions (asteroid-oauth-mixin.js:720)
at Asteroid.loginWith (asteroid-oauth-mixin.js:104)
at LoginForm../src/routes/accounts/auth/LoginForm.tsx.LoginForm.handleLoginWithGoogle (
Also when I run meteor mongo should db.meteor_accounts_loginServiceConfiguration.find().count() be 0 ?
I needed to meteor add service-configuration and setup my configure-accounts.js and create a google clientId for the application.
This gets me to the point where I have a popup and can choose which user to auth with. Then I receive a new error about target origin mismatch, but I'm going to close this question as resolved.
Hello and sorry for my broken English.
I have a method "updateCounterState" for incrementing and updating a number every second in my mongodb-Collection and showing this number in my template in my html-file. And it seems to work, but I get every time I use this function two errors. For three days I am trying to figure out how to fix these errors. I believe I have to use this code block with a Meteor.bindEnvironment-Wrapper because of my asynchronous updates. However, I don't know how to use this to fix these errors. Or maybe I am completely wrong and these errors have another cause.
EDIT #2:
client/main.html
<head>
<title>test-timer</title>
</head>
<body>
{{> timeTrackerTemplate}}
</body>
<template name="timeTrackerTemplate">
{{#each showCounterState}}
<p class="counter-state">{{state}}</p>
<button class="start-counting">Start</button>
{{/each}}
</template>
client/main.js
import { Template } from 'meteor/templating';
Template.timeTrackerTemplate.events({
'click .start-counting': function(e) {
Meteor.call('updateCounterState', this._id);
}
});
server/main.js
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// code to run on server at startup
});
methods.js (root folder)
Meteor.methods({
'updateCounterState': function(id) {
Meteor.setInterval(function() {
TimeTracker.update(
{_id: id},
{
$inc: {state: 1},
},
);
}, 1000);
}
});
ttcollection.js (root folder)
TimeTracker = new Mongo.Collection('testtracker');
if (Meteor.isClient) {
Template.timeTrackerTemplate.helpers({
showCounterState: function () {
return TimeTracker.find();
}
});
}
meteor:PRIMARY> db.testtracker.find({})
{ "_id" : ObjectId("57ee677227a0af6b59dc12ce"), "state" : 147 }
{ "_id" : ObjectId("57ee677a27a0af6b59dc12cf"), "state" : 148 }
{ "_id" : ObjectId("57ee6e6027a0af6b59dc12d0"), "state" : 73 }
Error every time I press a button:
Exception while simulating the effect of invoking 'updateCounterState' Error: Can't set timers inside simulations
at withoutInvocation (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:463:13)
at bindAndCatch (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:471:33)
at Object.setInterval (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:498:24)
at updateCounterState (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:66:20)
at http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3973:25
at withValue (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:1077:17)
at Connection.apply (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3964:54)
at Connection.call (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3840:17)
at Object.clickStartCounting (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:47:20)
at http://localhost:3000/packages/blaze.js?hash=a9372ce320c26570a2e4ec2588d1a6aea57de9c1:3718:20 Error: Can't set timers inside simulations
at withoutInvocation (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:463:13)
at bindAndCatch (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:471:33)
at Object.setInterval (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:498:24)
at updateCounterState (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:66:20)
at http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3973:25
at withValue (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:1077:17)
at Connection.apply (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3964:54)
at Connection.call (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3840:17)
at Object.clickStartCounting (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:47:20)
at http://localhost:3000/packages/blaze.js?hash=a9372ce320c26570a2e4ec2588d1a6aea57de9c1:3718:20
Where is the updateCounterState function defined? Is it a helper on a Template? What are the allow/deny statuses on the TimeTracker collection?
EDIT (after question updated)
First, your method takes as a single parameter the id of the TimeTracker, but when you call your method, you don't pass anything. You should either create a TimeTracker object from the client and then pass its _id, or take no arguments in your function and create it on the server (in this case, your method should return the _id to keep track of it.
Then, putting code in the root folder is not the best practice, you should use the /imports folder and then import { foo } from 'foo.js', or put your code in /server or /client.
Your Template helpers returns a Mongo cursor which is of no use. If you want to return a single TimeTracker, use TimeTracker.findOne({ _id: id }) which will return the object. Basically, you should probably have something like:
Template.timeTrackerTemplate.onCreated(function () {
this.trackerId = null;
});
Template.timeTrackerTemplate.helpers({
showCounterState: function() {
const trackerId = Template.instance().trackerId;
return trackerId ? TimeTracker.findOne({ _id: trackerId }).state : '';
}
});
Template.timeTrackerTemplate.events({
'click .start-counting': function(e, instance) {
instance.trackerId = TimeTracker.insert({ state: 0 });
Meteor.call('updateCounterState', instance.trackerId);
}
});
I solved my errors. It is important to call methods with collections on server side only - especially without "insecure" package.
if (Meteor.isServer) {
//Meteor.methods()
}
I am working on an Ember.js application and I'm using ember-cli 2.7.
I'm trying to overwrite the properties for get and set, but when I do, I get an unexpected token error.
Here is the code of my controller file:
import Ember from 'ember';
export default Ember.Controller.extend({
isDisabled: true,
emailAddress: '',
actualEmailAddress: Ember.computed('emailAddress', function(){
get(key){
return `getting email...${this.get('emailAddress')}`;
}
}),
emailAddressChanged: Ember.observer('emailAddress', function(){
console.log('observer is called: ', this.get('emailAddress'));
})
});
This seems like a simple solution, but I do not find the bug and it's killing me. Please help me and thank you.
It's a syntax error. function shouldn't be at there. Computed property definition should be like this:
actualEmailAddress: Ember.computed('emailAddress', {
get(key){
return `getting email...${this.get('emailAddress')}`;
},
set(key, value){
//...
}
}),
If you only have a get operation at a computed property, then you can write it as following:
actualEmailAddress: Ember.computed('emailAddress', function(){
return `getting email...${this.get('emailAddress')}`;
}),