I am trying to use the createViewModel from mobx-utils in a Mobx/React app.
My Store is:
export class CompanyStore extends StoreExt {
#observable
companyDetails: ICompanyDetails = {}
}
And when i use the 'createViewModel' function, in the component like so:
function CompanyDetails() {
const { companyStore } = useRootStore()
const test = createViewModel(companyStore.companyDetails);
}
I getting this error:
Uncaught TypeError: Object(...) is not a function
at new ViewModel (mobx-utils.module.js?1a9d:629)
at createViewModel (mobx-utils.module.js?1a9d:775)
at CompanyDetails (index.tsx?dbb5:21)
at eval (observer.js?796d:24)
at eval (useObserver.js?338c:91)
at trackDerivedFunction (mobx.es6.js?cacc:668)
at Reaction.track (mobx.es6.js?cacc:1705)
at eval (useObserver.js?338c:89)
at useQueuedForceUpdateBlock (useQueuedForceUpdate.js?20c5:19)
at useObserver (useObserver.js?338c:83)
What could the cause be?
Well, The issue was an incompatibility between Mobx and mobx-utils packages. By matching them to the same version, the issue was solved.
Related
I am using MobX 6+ in my project and I have a class with an #observable annotated field that contains class type.
I initialize the type with:
class MyClass {
#observable myObservableField = ClassToInitialize;
problemHere() {
....
const MyType = this.myObservableField;
const TypeInstance = new MyType(); // <-- Error is thrown at this line
....
}
}
class ClassToInitialize {
constructor() {
....
}
}
However I get the following error:
Uncaught TypeError: Class constructor IgnoreRegion cannot be invoked without 'new'
After investigating the issue, it appears to happen due to MobX wrapping the field in a proxy function.
In order to solve the issue, use shallow:
class MyClass {
#observable.shallow myObservableField;
....
}
I am using Dexie with Gatsby, I try to create database in db.ts with the code below, but there is error class constructors must be invoked with 'new' pointing to the line super('newDB'). Any help for solving the error?
export class NewDB extends Dexie {
store0!: Table<Store0>;
constructor() {
super('newDB');
this.version(1).stores({
store0: '++id',
});
}
}
export const db = new NewDB();
I am programming a game with React, TypeScript by using the Web Speech API. I use SpeechRecognition and SpeechSynthesisUtterance there is no problem with that but when I test the code with jest I get some type and reference errors like this:
TypeError: SpeechRecognition is not a constructor
and this one
ReferenceError: SpeechSynthesisUtterance is not defined
here is the code
const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
const recognition: any = new SpeechRecognition();
and that is how I use the other api
const utter: any = new SpeechSynthesisUtterance(newSelection);
utter.lang = 'tr-TR';
as I said before, app runs correctly but when I test it got this errors.
That's OK. When you do testing, your runtime doesn't support SpeechRecognition object. It doesn't have it. To fix the issue you must use it only after checking for existence, like here:
if ('SpeechRecognition' in window) {
const x = new SpeechRecognition();
}
However, this is not the best approach, it's repetitive. I would advise creating the simple class that would wrap SpeechRecognition object inside himself and do this checking.
Something like this:
class MySpeechRecognizer {
private readonly _instance: SpeechRecognition | undefined;
constructor() {
if ('SpeechRecognition' in window) { this._instance = new SpeechRecognition() }
}
start() {
if (this._instance) {
this._instance.start()
}
}
}
I want to write simple test checking if my next.js page loads without errors.
I followed this tutorial and I almost got it working, but simple-react-validator stays in my way with the following error when i run npm run test which justs run jest behind the scene:
TypeError: simple_react_validator_1.default is not a constructor
private validator : SimpleReactValidator = new SimpleReactValidator({
| ^
96 | locale: 'en',
97 | autoForceUpdate: this,
98 | validators: {
Before I couldn't even use simple-react-validator with my Typescript Next.js application. I needed to add to next-env.d.ts this:
declare module 'simple-react-validator' {
const content: any;
export default content;
}
Then I was able to use it in my application, but tests are complaining about constructor.
What can cause this issue? Maybe I need to somehow explicitly tell it somewhere what SimpleReactValidator is but I don't know where.
After some time I figured it out.
If using typescript, you must to wrap your mock in 'default' property:
jest.mock('simple-react-validator', () => {
return {
'default': class SimpleReactValidatorMock {
allValid() { return true; }
fieldValid() { return true; }
message() { return ''; }
}
}
});
I found the answer here:
https://github.com/kulshekhar/ts-jest/issues/120#issuecomment-283653644
I'm following a set of tutorial videos.
I've added this code to main.js / on the server:
// import './../imports/utils';
import { greetUser } from './../imports/utils';
console.log('Log from server / main.js');
console.log(greetUser());
And I'm getting an error TypeError: greetUser is not a function:
Whereas I have my utils file here:
console.log('Log imports / utils');
// ES6 // let
export let greetUser = function () {
return 'Hello!';
};
TypeError: greetUser is not a function at meteorInstall.server.main.js (server/main.js)
I'm also getting this on the console:-
What could be causing this?
Long story short; I restarted meteor and magic happened, I got the output that I wanted from the console log on both the server and the client.