jest test failing in component whilst setting the domain - reactjs

TypeError: Cannot set property domain of [object Object] which has only a getter
Occurring in this function:
componentWillMount(){
document.domain="moc.com";
CreditStore.addChangeListener(() => this._getModalErrorList());
}
Why?

Related

ExtJSv7: Error while implementing Ext.mixin.Observable

We are trying to implement Ext.mixin.Observable in our ViewController, snippet below
mixins: ['Ext.mixin.Observable'],
constructor: function(config){
this.mixins.observable.constructor.call(this, config);
},
but this raises an error for this.mixins.observable.constructor.call(this, config); in Viewcontroller
BaseController.js?_dc=1587282588103:440 Uncaught TypeError: Cannot read property 'listen' of undefined
at constructor.listen (BaseController.js?_dc=1587282588103:440)
at constructor.callParent (Base.js?_dc=1587282588090:1479)
at constructor.listen (ViewController.js?_dc=1587282588091:206)
at constructor.updateListen (BaseController.js?_dc=1587282588103:257)
at constructor.setter [as setListen] (Config.js?_dc=1587282588102:329)
at Ext.Configurator.configure (Configurator.js?_dc=1587282588102:674)
at constructor.initConfig (Base.js?_dc=1587282588090:1650)
at constructor (Observable.js?_dc=1587282588091:437)
at constructor (MainController.js?_dc=1587282588090:6)
what could be wrong here, I followed the documentation given on sencha docs for Ext.mixin.Observable
Look like you miss this.callParent(arguments) in constructor after call observable constructor

Error thrown when react component refreshes

I have a react typescript component that has the following componentDidMount method:
componentDidMount() {
ComponentFields.get(this.ComponentName)
.then(activeFields => {
this.setState({ activeFields });
});
}
It has a state interface with following field
export interface ISettingsPageState {
activeFields: Dictionary<IComponentField>,
}
where IComponentField is an interface.ComponentFields.get(componentName: string) is a static method which returns a Promise<IDictionary<IComponentField>>.
It works fine the first time it loads but when I refresh the page, the setState method in componentDidMount throws the following exception:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
Anyone have any idea what could be causing this?
It turns out that it was a child component throwing the error. Even though the exception was being thrown at the setState line, the problem was in my rendermethod. If anyone has the same problem, I would suggest taking a look at the render method to see what's going wrong.

Angular component not loading under Outlook 2016 for Mac

I am working on create a Outlook Add-in using Angular. For a sample i added task pane button to open up a side panel in outlook. After index page loading its open another component.
Problem is angular component not loading in Outlook 2016 mac, but it works Firefox, Chrome, Safari browsers.
How would you recommend carrying out such a problem?
Note : I have tested outlook on mac with Vorlon. Office.intialize not loading and got folllowing console messages.
Attempting to configure 'userAgent' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'appVersion' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'appName' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'product' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'vendor' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
And also I published the addin and checked F12 to console messages in Outlook on windows. getting an error message "SCRIPT5022: Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function."
This is my main.ts file
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
declare let Office:any;
Office.initialize = (reason: any) => {
console.log('SampleAddin: initalizing office.js...');
// bootstrap
platformBrowserDynamic().bootstrapModule(AppModule)
.then((success: any) => {
console.log('SampleAddin: bootstrap success', success);
})
.catch((error: any) => {
console.log('SampleAddin: bootstrap error', error);
});
};
Without an error/warning, it is difficult to identify what might be going on. I'd recommend looking at the following resources:
Tips for creating Office Add-ins with Angular
Debug Office Add-ins on iPad and Mac
OfficeDev/script-lab (OSS Word/Ppt/Excel Add-in using Angular)

datalist TypeError: Cannot read property 'replaceChild' of null

On a react project I'm getting :
DOMLazyTree.js:70 Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null
at Function.replaceChildWithTree (DOMLazyTree.js:70)
at Object.dangerouslyReplaceNodeWithMarkup (Danger.js:42)
at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (DOMChildrenOperations.js:122)
at ReactCompositeComponentWrapper._replaceNodeWithMarkup (ReactCompositeComponent.js:781)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:771)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
at Object.receiveComponent (ReactReconciler.js:126)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:751)
When I try to load a page to which i added a datalist
Any clue where to start looking ?
If using redux-thunk, ensure that the error is not swallowed by a promise.
We had a similar problem where calling dispatch synchronously called our reducers, and React synchronously rerendered. In our render, an error was raise when passing children to an <input /> which bubbled up in our thunk.
In other words, the real error message was displayed with the actions in the console.

Sync multiple properties on state between React app and Firebase database using re-base

The re-base documentation is quite clear on the matter when it comes to syncing one property of your react app's state with firebase: https://github.com/tylermcginnis/re-base#syncstateendpoint-options
It says to use syncState in the componentDidMount method of your component like this:
componentDidMount(){
base.syncState(`shoppingList`, {
context: this,
state: 'items',
asArray: true
});
}
I want to sync two different properties, so 'shoppingList; and 'weeklyBudget'. I tried to duplicate the statement like this:
componentDidMount(){
base.syncState(`shoppingList`, {
context: this,
state: 'items'
});
base.syncState(`weeklyBudget`, {
context: this,
state: 'budget'
});
}
But the console just throws the following error:
Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Order.
How do I could sync multiple properties on state between React app and Firebase database using re-base?
If you add asArray: true to the object right after context: this, you should be fine.
It works like this for me. I am not satisfied with this code at all myself because I have seven blocks that connect to different endpoints. An alternative might be to use fetch and resolve via Promise.all([x, y, z]).then()

Resources