Hello all,
since my update to meteor 2.10.0 I have an issue with calling a subscription via useTracker. I get the following error message in the console and when I navigate to some other menu the app is crashing. I just don’t see where this comes from. Maybe someone had already the same issue.
Thanks for any help in advance.
inject.js:1 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at c (inject.js:1:5974)
at inject.js:1:6103
at Array.map (<anonymous>)
at inject.js:1:6095
at Array.forEach (<anonymous>)
at c (inject.js:1:5982)
at Array.map (<anonymous>)
at inject.js:1:6814
at Array.reduce (<anonymous>)
My component looks like this when this error occours.
import React, { useState, useEffect } from "react";
import useStyles from "./components/styles";
import { Grid } from "@material-ui/core";
import PageTitle from "../../components/PageTitle/PageTitle";
import { useTranslation, Trans } from "react-i18next";
import { useUserState } from "../../context/UserContext";
import { useTracker } from "meteor/react-meteor-data";
import ActiveRouteWidget from "./components/activeRouteWidget";
import Widget from "../../components/Widget/Widget";
export default function ActiveRoutes({ ...props }) {
const [filterQuery, setFilterQuery] = useState({});
const [sortQuery, setSortQuery] = useState({ RouteDate: -1 });
const { user } = useUserState();
const { t, i18n } = useTranslation();
var classes = useStyles();
const useRoutesSubscription = () =>
useTracker(() => {
const subscriptionHvzRoutes = Meteor.subscribe(
"hvzRoutes",
{ companyAccountId: user.profile.companyAccountId },
sortQuery,
filterQuery
);
console.log(subscriptionHvzRoutes.ready());
return !subscriptionHvzRoutes.ready();
}, []);
const useRoutes = () =>
useTracker(() => {
console.log(dbHvzRoutes
.find(
{ companyAccountId: user.profile.companyAccountId },
{ sort: sortQuery },
filterQuery
)
.fetch());
return dbHvzRoutes
.find(
{ companyAccountId: user.profile.companyAccountId },
{ sort: sortQuery },
filterQuery
)
.fetch();
}, [JSON.stringify(filterQuery), JSON.stringify(sortQuery)]);
/*
const [hvzRoutes, isLoading] = useTracker(() => {
const subscription = Meteor.subscribe('HvzRoutes', { companyAccountId: user.profile.companyAccountId }, sortQuery, filterQuery);
const page = dbHvzRoutes.find({ companyAccountId: user.profile.companyAccountId}, {sort: sortQuery}, filterQuery).fetch();
return [page, !subscription.ready()]
}, [JSON.stringify(filterQuery),JSON.stringify(sortQuery)])
*/
const isLoading = useRoutesSubscription();
const routes = useRoutes();
if(isLoading){
return(<div>...loading</div>);
}else{
return (
<>
<PageTitle title={<Trans>Driver Panel</Trans>} />
<Grid container spacing={4} style={{ marginTop: "55px" }}>
<Grid item xs={12}>
<Widget
title="Active Routes"
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
disableWidgetMenu
viewStyle="list"
>
<Grid container spacing={1}>
<Grid item lg={12} md={12} sm={12} xs={12}>
{isLoading ? (
<div>...loading</div>
) : (
routes.map((item, index) => {
if (item.RouteStatus === "ACTIVE") {
return (
<ActiveRouteWidget
key={index}
routeItem={item}
viewStyle="list"
></ActiveRouteWidget>
);
} else {
return null;
}
})
)}
</Grid>
</Grid>
</Widget>
</Grid>
</Grid>
</>
);
}
}