Watermelondb: TypeError: from.from is not a function. (In 'from.from(observables[0])', 'from.from' is undefined)

[YajanaRao]

Here is my component

const PlaylistItem = ({playlist}) => {
  console.log(playlist);
    return (
    <List.Item
      title={playlist.title}
      description="by you"
      left={props => <List.Icon {...props} icon="audiotrack" />}
    />
  );
};

const enhance = withObservables(['playlist'], ({playlist}) => ({
  playlist
}));

export default enhance(PlaylistItem);

Here is how I call the component

<FlatList
          data={this.state.playlists}
          renderItem={(item) => <PlaylistItem playlist={item} />}
        />

This is my query

async componentDidMount(){
    const playlists = database.collections.get('playlists');
    const allPlaylists = await playlists.query().fetch();
    console.log("playlist ", allPlaylists);
    this.setState({
      playlists: allPlaylists
    })
  }

Please help me. I am not able to understand the problem.
If I remove withObservables and export as it is, it is working fine.

[YajanaRao]

The walk around for this issue is to change
var from = require('rxjs/observable/from');
to
var from = require('rxjs');
in \node_modules\@nozbe\with-observables\dist\with-observables.cjs.js

[pranavbabu]

@YajanaRao Why did you close the issue?

[YajanaRao]

If you have similar issue I will reopen it.

[pranavbabu]

I do

[pranavbabu]

Guys, I got also error ExceptionsManager.js:44 TypeError: (0 , _defer.defer) is not a function
After using observe() on collection while switching to fetch() method works, but I guess it will not handle changes. Something with library imports...

[pranavbabu]

Seems like with 0.15.0 the problem is solved.

[joshfarrant]

Sorry to reopen this discussion, but I was experiencing the same from.from is undefined that @YajanaRao was experiencing.

The solution they proposed (modifying the import in with-observables.cjs.js did resolve the issue, but obviously that's just a workaround, not a permanent fix.

Are there any suggestions as to what the underlying issue could be, and how that can be resolved? Is it as simple as changing the import, or coudl that have knock-on effects?

[auliakbarh]

I have same issue, anyone can fix it?

[imsheth]

still facing the issue with

"@nozbe/watermelondb": "^0.16.0",
"@nozbe/with-observables": "^1.0.5",

[gliesche]

Also facing this issue with:

"@nozbe/watermelondb": "0.17.1",
"@nozbe/with-observables": "1.0.5",

[tobiasorth]

Same here, still investigating:

"@nozbe/watermelondb": "0.19.0",
"@nozbe/with-observables": "1.0.5"

[Batuu13]

I am also experiencing this issue! Also, lack of examples for separated DB calls is a pain in the ass! I am trying to write a service to separate DB calls and components but there is no tutorial :/

[StebanDev]

@radex i think this is something that should be fixed right? I am having the same issue with latest version and @YajanaRao 's solution did the trick but I'm not sure if that could bring other issues.

[radex]

@StebanDev I think next version of WatermelonDB ought to fix the issue

[WrathChaos]

@YajanaRao's solution is working but this is really not a good solution. I think this issue should stay open.

[Cully-Curwen]

Also running into this problem with;

    "react-native": "0.63.3",
    "@nozbe/watermelondb": "^0.20.0",
    "@nozbe/with-observables": "^1.0.7",

using Hermes engine on Android,

[igorcaldeira]

Same issue here, any permanent solution ?