Not able to work with Mobx when including "reflect-metadata" library in typescript project

[thebedroomprogrammer]

I am using an express server where I am using relfect meta data to wrap my controllers.
The controllers render a react component that has components with mobx decorators. When using mobx decorators with reflect meta data I am getting this error.

TypeError: at DecorateConstructor (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/reflect-metadata/Reflect.js:544:31) at Object.decorate (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/reflect-metadata/Reflect.js:130:24) at __decorate (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/ui/src/v2/components/ToastNotification/index.tsx:4:92) at Object.<anonymous> (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/ui/src/v2/components/ToastNotification/index.tsx:16:24) at Module._compile (internal/modules/cjs/loader.js:776:30) at Module.m._compile (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/ts-node/src/index.ts:858:23) at Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Object.require.extensions.(anonymous function) [as .tsx] (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/ts-node/src/index.ts:861:12) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

[danielkcz]

Please setup a reproduction. We can't help you without any code.

[thebedroomprogrammer]

@controller("")
class HomepageController {
@get("/")
@use(pubValidator)
@use(appVersion([1, 2, 3]))
@use(ssr(CACHE_KEY_TYPE.HOMEPAGE))
async serveHomePage(req: Request, res: Response) {
 const rendered = await Renderer.renderView(res.locals);
 return res.send(renderToString(rendered));
 }
}

This is the code on my server which renders an view and sends it to the client. Inorder to make the controller in such a way I have used reflect-meta library to use decorator.

The view that it renders is

@inject("env", "toastn")
@observer
class ToastNotification extends React.Component<IProps, {}> {
  render() {
if (!process.env.IN_BROWSER) {
  return <div />;
} else if (!this.props.toastn.isVisible) {
  return <div />;
} else if (this.props.toastn.isVisible) {
  const { isVisible, message, hideToast, toastColor } = this.props.toastn as ToastStore;

  return (
    <div
      style={{ backgroundColor: toastColor }}
      className={`${styles.toastWrapper} ${isVisible ? styles.slideInAndOut : ""} animated`}
    >
      <span onClick={hideToast} className={styles.toastClose}>
        x
      </span>
      <div className={styles.toastDiv}>
        <div id={"toast-message"} className={styles.toastText}>
          {message}
        </div>
      </div>
      <span className={styles.toastVisualTimer} />
    </div>
  );
}
}
}

Now since the view also uses the same decorator pattern I think this is causing some issue. I have also seen this in the docs that Mobx has some issue when used along side "reflect-metadata" lib.

This is the error that I am getting

TypeError: 
at DecorateConstructor (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/reflect-metadata/Reflect.js:544:31)
at Object.decorate (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/reflect-metadata/Reflect.js:130:24)
at __decorate (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/ui/src/v2/components/ToastNotification/index.tsx:4:92)
at Object.<anonymous> (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/ui/src/v2/components/ToastNotification/index.tsx:16:24)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Module.m._compile (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/ts-node/src/index.ts:858:23)
at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Object.require.extensions.(anonymous function) [as .tsx] (/Users/thebedroomprogrammer/code/src/code.gamezop.io/Gamezop/peach/node_modules/ts-node/src/index.ts:861:12)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)`

[danielkcz]

Duplicate mobxjs/mobx-react#756

TL;DR There isn't much we can do about it, so closing.