@observable doesn't cause a re-render when using Typescript

[naomipol]

Hi, I have an issue

I just started developing a new project where i use mobx for a shared state management core module between a react web app and react-native mobile app.

The core module uses typescript, it is compiled and consumed by both app projects.

My problem is non of the components in both projects re-render when an @observable property in a store (from the core module) changes.

When I create a the store with the same definition and logic in each of the projects, the components re-render as expected.

I believe this issue has something with importing stores compiled from Typescript into a non typescript project, but i can't get over it!

Additional info:

• The .ts store file:

import { observable, action } from 'mobx'

export class UserStore {
	@observable loading = false;

	@action login() {
		this.loading = true;
    	        setTimeout(() => {this.loading = false},1000)
	}
}
export const userStore = new UserStore();

• The .tsconfig file:

{"compilerOptions": {
    "lib": ["es6", "dom", "es2015"],
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "declaration": false,
    "outDir": "lib",
    "experimentalDecorators": true
  },
  "include": ["index.ts", "src" ]}

• All projects use latest mobx and mobx-react versions.
• Both react and react-native project use regular babel.
• The component consuming the store (I've got a Provider configured..):

@inject('userStore')
@observer
class Loading extends Component {

  componentWillMount() {
    this.props.userStore.login();
  }

  render() {
    return (
        this.props.userStore.loading ? <div>loading...</div> : <div>loaded...</div>
) }}

I would be very thankful for any help!

[naomipol]

I've transformed part of core module to javascript ES6 transpiled with babel-cli and it works!
I still can't get the Typescript version work...

[farwayer]

Are you sure your code is correct? Look like you are trying to set false to already falsy property.

[naomipol]

I'ts a mistake, it is really set to true

[mweststrate]

Does downgrading to mobx 3.1.9 make a difference? (Before the rollup packaging). Can you double check you are nowhere importing from something like mobx/lib/..., (VScode typescript hero plugin tends to do this)?

Could you produce (a simplfiied) project setup?

[naomipol]

Downgrading mobx didn't help.
I've created a minimal project setup download link

setup:

1. In the core folder run npm install and npm run build
2. In the web folder run npm install and npm install ../core
3. Run the web app with npm run start

[naomipol]

@mweststrate I had some errors running the attached project setup. Just fixed it so if you have downloaded it already, please download again.
Thanks

[farwayer]

@naomipol I can't run project. But I think the problem is you are using several mobx installs (one in core and one in web).

[naomipol]

@farwayer I've removed the separate mobx install from web - still the same issue

[mweststrate]

I can't run the project:

Failed to compile.

Error in ./src/index.js
Module not found: 'core' in /home/michel/Downloads/issue/web/src

[mweststrate]

Note that both projects still require mobx as dependency. Please make 'mobx' a peer dependency in core, so that the dependency should get deduplicated. We have a very similar setup at Mendix. The point is that mobx should be provided from the hosting environment, web and reused, instead of core getting its own copy.

[naomipol]

That was it!!!
When I make 'mobx' a peer dependency in 'core' all works as expected!

But, when I link the 'core' module to the 'web' project with npm link core the problem comes back. I think it is because npm link copies the entire node_modules directory of the 'core' module including 'mobx', so making it as a peer dependency doesn't help in this case.

Do you know of any way to overcome this problem?
Thanks!

[naomipol]

Was able to solve the npm link problem like this.

[fosteman]

Having the same issue. Does not seem like resolutions of using peerDependencies works for me.

[kubk]

Hi @fosteman Please don't write in closed issues. Create a new issue instead. Make sure codesandbox reproduction is included: https://codesandbox.io/s/minimal-mobx-react-project-ppgml?file=/index.js