Class constructor <React Class component> cannot be invoked without 'new' error

[iicdii]

Intended outcome:
No error is thrown when it renders React class component.

Actual outcome:

How to reproduce the issue:

1. Go to https://codesandbox.io/s/beautiful-dream-kz0n75?file=/src/ToastStore.tsx
2. Click "Push Toast" button
3. Check out the error

Versions

• mobx: 6.6.1
• mobx-react: 7.5.2
• react: 18.2.0
• react-dom: 18.2.0
• react-scripts: 5.0.1

[mweststrate]

That is strange! Should work completely fine. It doesn't seem the issue is related to MobX (Toast isn't even an observer after all), but somehow to the transpiler setup, so you might want to try StackOverflow. Does using `React.creatElement(Toast, { label: toast })` instead of <Toast ../> work?

…

On Wed, Aug 17, 2022 at 11:21 AM Kim, Harim ***@***.***> wrote: *Intended outcome:* No error is thrown when it renders React class component. *Actual outcome:* [image: error] <https://user-images.githubusercontent.com/4951716/185095115-7ab9c3bf-bc4a-414c-a4f1-9308b9b4ff72.png> *How to reproduce the issue:* 1. Go to https://codesandbox.io/s/beautiful-dream-kz0n75?file=/src/ToastStore.tsx 2. Click "Push Toast" button 3. Check out the error *Versions* - mobx: 6.6.1 - mobx-react: 7.5.2 - react: 18.2.0 - react-dom: 18.2.0 - react-scripts: 5.0.1 — Reply to this email directly, view it on GitHub <#3503>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHRVXXZLYK6BFC5UILVZS4I3ANCNFSM56Y7E23A> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[iicdii]

1. I also doubt the transpiler so I found this suggestion to change compiler target from es5 to es6 (Stackoverflow)

// tsconfig.json
"complierOptions": {
  "target": "es6" // from "es5"
},

It does not solve the problem though. (reference: https://codesandbox.io/s/beautiful-dream-kz0n75?file=/tsconfig.json)

2. React.creatElement(Toast, { label: toast }) instead of <Toast ../> doesn't work.

[mweststrate]

Ah, I already see the problem, React elements are plain objects but shouldn't be turned into observables when storing them in `toasts` (by default Mobx makes any data structure recursively observable unless it's a class instance). Using `makeObservable(this, { toasts: observable.shallow });` should fix the issue

…

On Wed, Aug 17, 2022 at 12:11 PM Kim, Harim ***@***.***> wrote: 1. I also doubt the transpiler so what I found is suggestion to change compiler target from es5 to es6 (Stackoverflow) // tsconfig.json"complierOptions": { "target": "es6" // from "es5"}, It does not solve the problem though. (reference: https://codesandbox.io/s/beautiful-dream-kz0n75?file=/tsconfig.json) 1. React.creatElement(Toast, { label: toast }) instead of <Toast ../> doesn't work. — Reply to this email directly, view it on GitHub <#3503 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEZB7XLIXFKQE5U453VZTCHLANCNFSM56Y7E23A> . You are receiving this because you commented.Message ID: ***@***.***>

[iicdii]

That works like charm! Thanks for help @mweststrate
I will leave the code snippet for someone who's struggled the same problem.

import React, { ReactElement } from 'react';
import { makeObservable, observable } from 'mobx-react';

class ToastStore {
  constructor() {
    makeObservable(this, { toasts: observable.shallow });
  }

  toasts: ReactElement<IToast>[] = [];
}