Maximum call stack size exceeded when using the new typescript enabled version of reactjs

Question

I use the new typescript supported version of reactjs

along with the redux-orm and when u try to insert a value into the store i get this issue of "Maximum call stack size exceeded" the same works with the old template

Below is the code with new typescript supported reactjs which throws the error https://reactjs.org/docs/static-type-checking.html#typescript and the old github version https://github.com/microsoft/TypeScript-React-Starter which works.

https://drive.google.com/open?id=15eolNjeYroyubgSmbGaaKfjxbe-IZ8KK

I am unable to understand what is different that causes the error with the new version. Thanks for any help.

Answer 1

Properties can't be defined directly on Model classes.

The root cause lies in the create-react-app's babel preset - transpilation output introduces additional property descriptors in Model prototype chain.

These properties interfere with descriptors installed by redux-orm during schema registration, resulting in Maximum call stack size exceeded error.

This can be avoided through declaration merging, specifically by providing a class and an interface with matching names. The interface contains Model properties, the class is almost 1:1 to JS Model definition.

Example:

interface Book {
    id: number
    title: string
}

class Book extends Model<typeof Book> {
    static modelName = 'Book' as const

    static fields = {
        id: attr(),
        title: attr()
    }
}

I've created a repo with working example: https://github.com/tomasz-zablocki/redux-orm-ex-types-react-example

Mind you, these are custom types, but it's definitely where I'd like to take the @types/redux-orm package to, likely with the 0.14 release of redux-orm.