withDatabase is returning object instead of function - using RN 0.60.5 & watermelon 0.14.0

[rohitagarwal88]

I have wrapped Root component in Database Provider. `

`
I am trying to access the database inside my component

`const enhance = withDatabase(withObservables(['members'], ({ members, database }) => { console.log("ddsdmndsf", database) // database is undefined return {

    users: database.collections.get('members').query().observe(),
    members
}

}))`

const EnhancedLang = enhance(LanguageSelectionScreen) // export default LanguageSelectionScreen;

export default class LanguageSelScreen extends Component { constructor(props){ super(props); this.state = {}; console.log("inside languge components", EnhancedLang) // Returns an object } render() { return (

    );
}

}

EnhancedLang returns an Object

{$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …} $$typeof: Symbol(react.element) key: null props: {children: ƒ} ref: null type: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …} _owner: null _store: {validated: false} _self: null _source: null __proto__: Object

It throws the error.

@radex : Can you please help me to figure out where I am going wrong.

[arosendorff]

I've had that issue previously (didn't find a solution unfortunately). Do you have babel-plugin-module-resolver installed in your app?

[rohitagarwal88]

Yup.. I had babel-plugin-module-resolver [ 'module-resolver', { // root: [path.resolve('./')], alias: { shared: '../shared/src', // sharedNodeModule: '../shared/node_modules', }, }, ],

Do I need to add any config related to watermelon to module-resolver ?

[arosendorff]

I don't know if anyone from the WatermelonDB team knows about any problems with module-resolver. I ended up just removing it, but I would like to be able to use it. This and #304 seem to be the same issue. I'm going to try take a look at this hopefully over the weekend, but I definitely think module-resolver is to blame!

[rohitagarwal88]

Yup, I removed module-resolver then tried it out. Redid everything but still getting the same error. I think it's not coz of module-resolver.

[OtacilioN]

I am experiencing the same error after updating Babel and my babelconfig to:

module.exports = function (api) {
  api.cache(true)
  const presets = [
    "module:metro-react-native-babel-preset",
    'module:react-native-dotenv'
  ];
  const plugins = [
    [
      'babel-plugin-idx',
      {
        importName: './idx'
      }
    ],
    "@babel/plugin-transform-flow-strip-types",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-runtime"
  ];

  return {
    presets,
    plugins,
    'sourceMaps': true,
  };
}

[anbarasiu]

I have the same issue. When I wrap the component with withDatabase, it returns an object. I don't use module-resolver though. Is there a solution to this?

[Mohamed-kassim]

me too is there any solution?

[victorbutler]

I wish I found this thread 5 hours ago. But at least I'm not crazy! I removed babel-plugin-module-resolver and will just deal for now 👍

[radex]

@victorbutler Hey! Would you mind taking a few minutes to add to docs (https://github.com/Nozbe/WatermelonDB/tree/master/docs-master ), in the appropriate place, a short & sweet "troubleshooting" about this - explaining that if you get this error, this may fix it?

[victorbutler]

Hi @radex! I don't think it's really a solution, as much as it is a workaround. There seems to be some incompatibility perceived between WDB and this babel-plugin-module-resolver plugin with regard to the withDatabase wrapper. My project is new and small, so I am Ok just removing the plugin. But I think the challenge is figuring out how the plugin is modifying the wrapper so that they can work together.

It's still an issue, so I think the issues list here is the best place for it. If I think of any way to fix it, I'll give it a try and report back.

[barbalex]

I experience the same problem but am not using babel-plugin-module-resolver, with:

• "@nozbe/watermelondb": "0.20.0" and
• "@nozbe/with-observables": "1.0.7"

Simply can't get the HOC to work 😢

This is one example: https://github.com/barbalex/vermehrung/blob/watermelondb/src/components/Data/Herkunft/DataProviderHOC.js

Am now using useState and useEffect and plain rxjs methods:

  const db = useDatabase()
  const [herkunfts, setHerkunfts] = useState([])
  useEffect(() => {
    const subscription = db.collections
      .get('herkunft')
      .query(notDeletedOrHasConflictQuery)
      .observe()
      .subscribe(setHerkunfts)
    return () => subscription.unsubscribe()
  }, [db.collections])

I am actually finding this quite powerful. Would there be a reason not to do it like this? (I am new to observables)

[osvaldokalvaitir]

I have the same issue. When I wrap the component with withDatabase, it returns an object.

I don't use module-resolver though. Is there a solution to this?

[osvaldokalvaitir]

@barbalex The way you did it is working fine?

[barbalex]

@osvaldokalvaitir

Yes, so far I am pretty happy with it. Though I am new to rxjs so I had to learn a lot. Also you have to really know how useEffect works in react. But both are good to know anyway.

This is one of my usual examples for a list form that can be filtered in different ways: https://github.com/barbalex/vermehrung/blob/master/src/components/Data/Herkuenfte/index.js#L80-L127

I am not saying it is simple. But it seems to get the job done quite well. And I have not yet met a situation I could not find a solution for. Though some situations made me learn a lot...

All in all, WatermelonDB combined with rxjs are GREAT in making the ui a function of the local data and a user's settings.

[osvaldokalvaitir]

@barbalex

Thank you very much, I'm starting now with WatermelonDb and it already gave this problem .. I didn't even start making a todolist!

Thank you very much, helped me a lot.

I will see your link and I am also watching this issue:

https://github.com/Nozbe/withObservables/issues/16

[alexyoungs]

Hi all, following this thread with interest. Did anyone ever get to the bottom of it?