React Hooks not working with new meteor app (became mobx-react issue)

react
1

Hi,
I am trying to integrate the new react hooks into my application, but am having issues. So I created a new meteor app with the following (I’m on Windows 10 atm):

  • meteor create junk --react
  • cd junk
  • meteor reset
  • meteor npm install react react-dom --save (to get to latest 16.8.4)
  • add to client/main.jsx
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'
import App from '/imports/ui/App'
import React, { useState } from 'react'

Meteor.startup(() => {
   const [loginState, setLoginState] = useState({})
   render(<App />, document.getElementById('react-target'))
})

It seems as I am missing something. I had this working a few weeks ago but not now, thus the reason to create a simple demo of the problem.

Any pointers from this inspiring meteor community are most welcome!

2

You need to use hooks inside a React function component, Meteor.startup is not a React component at all.

2 Likes
3

Thanks for noticing that. Poor example.
Putting the code into a functional component and calling that instead of <App/> worked just fine.
Now onto isolating the problem inside my code base: some interaction of some kind.

4

UPDATE: turns out my underlying issue is the observer() function of mobx-react.

You need to use mobx-react-lite for react hooks as it seems that observer() is an HOC that -if I read it correctly- turns the wrapped function into a react class, which seems to be what the react error (above) is referring to.

See this mobx-react 6 thread about the future and possible merging of mobx-react and mobx-react-lite. They state in the github readme, you can use both packages together to ease migration.