meteor/react-packages

Uncaught TypeError: useTracker is not a function!

yaser-alazm opened this issue · 10 comments

yaser-alazm commented

Hello.

It's my first time trying to work around with Meteor, so I have this project already created, I cloned the repo to my local and started to play around with it.

But I'm stuck with this error (Uncaught TypeError: useTracker is not a function!) every time trying to fetch data.

In the main.js on the server I'm trying to connect to the database and add some data:

import { Meteor } from "meteor/meteor";
import { Tasks } from "/imports/api/tasks";
import { Random } from "meteor/random";

const testData = [
  {
    title: Task1",
    hasDescription: true,
    commentsCount: 2,
    color: "#4e42c3",
    status: "incomplete"
  },
  {
    title:"Task2",
    customFields: [
      {
        _id: Random.id(),
        value: "Highest"
      }
    ],
    status: "incomplete"
  }
];

Meteor.startup(() => {
  // If the Tasks collection is empty, add some data.
  if (Tasks.find().count() === 0) {
    testData.forEach(task => Tasks.insert(task));
  }
});

in the Tasks.js file there is the creation on tasks collection and it's schema :

import { Mongo } from 'meteor/mongo';
import SimpleSchema from 'simpl-schema';

export const Tasks = new Mongo.Collection('tasks');

const regExId = SimpleSchema.RegEx.Id;

const { Integer } = SimpleSchema;

Tasks.schema = new SimpleSchema(
  {
    _id: {
      type: String,
      regEx: regExId
    },
    createdAt: {
      type: Date,
      autoValue() {
        if (this.isInsert) {
          return new Date();
        }
      }
    },
    updatedAt: {
      type: Date,
      autoValue() {
        if (this.isUpdate) {
          return new Date();
        }
      }
    },
    isPrivate: {
      type: Boolean,
      defaultValue: false
    },
    title: {
      type: String,
      min: 1,
      max: 500
    },
    totalTimeTracked: {
      type: Integer,
      defaultValue: 0,
      min: 0
    },
    commentsCount: {
      type: Integer,
      defaultValue: 0,
      min: 0
    },
    filesCount: {
      type: Integer,
      defaultValue: 0,
      min: 0
    },
    hasDescription: {
      type: Boolean,
      defaultValue: false
    },
    dueDate: Date,
    repeat: {
      type: Object,
      defaultValue: {}
    },
    'repeat.interval': {
      type: Integer,
      min: 0,
      max: 365
    },
    completedAt: {
      type: Date
    },
    status: {
      type: String,
      allowedValues: ['incomplete', 'completed']
    },
    customFields: {
      type: Array,
      defaultValue: []
    },
    'customFields.$': {
      type: Object
    },
    'customFields.$._id': {
      type: String,
      regEx: regExId
    },
    'customFields.$.value': {
      type: SimpleSchema.oneOf(String, Number, Date)
    },
    color: {
      type: String,
      regEx: /^#[0-9A-F]{6}$/i
    }
  },
  {
    clean: {
      filter: true,
      autoConvert: true,
      removeEmptyStrings: false,
      trimStrings: false,
      getAutoValues: true,
      removeNullsFromArrays: true
    },
    requiredByDefault: false
  }
);

Tasks.attachSchema(Tasks.schema);

In the ui/app.js I just try to use useTracker to fetch the data, in the app.js :

import React from 'react';

import { useTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks/';

const App = () => {
  const tasks = useTracker(() => {
    Tasks.find({}).fetch();
  }, []);
  // console.log(tasks);
  return (
    <>
      <h1>Test</h1>
    </>
  );
};

export default App;

this is the .meteor/packages file content

meteor-base@1.4.0             
mongo@1.10.1                 

standard-minifier-js@2.6.0    
es5-shim@4.8.0                
ecmascript@0.15.0            
shell-server@0.5.0           

static-html             
react-meteor-data
aldeed:collection2@3.0.0
mdg:validated-method
dev-error-overlay
jquery

The package.json content :

{
  "name": "plutio-test",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha"
  },
  "devDependencies": {
    "@types/chai": "4.1.7",
    "@types/mocha": "5.2.7",
    "babel-eslint": "10.0.2",
    "chai": "4.2.0",
    "prettier": "1.18.2"
  },
  "dependencies": {
    "@babel/runtime": "7.5.0",
    "ajv": "^6.9.1",
    "eslint": "^4.12.1",
    "jquery": "^3.5.1",
    "meteor-node-stubs": "0.4.1",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "simpl-schema": "1.5.5"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}
yaser-alazm commented

Any recommendations ?

CaptainN commented

It looks like configuration is fine, import statement is fine - not sure what's going on there. You do have an error in your useTracker block, but that would cause a different problem:

const tasks = useTracker(() => {
    Tasks.find({}).fetch();
}, []);

You need to return that value:

const tasks = useTracker(() => {
    return Tasks.find({}).fetch();
}, []);
yaser-alazm commented

@CaptainN I already consider this to cause this issue, but still no luck!
I think it's something to deal with the packages version.

app.js:10 Uncaught TypeError: useTracker is not a function
    at App (app.js:10)
    at renderWithHooks (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:17217)
    at mountIndeterminateComponent (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19299)
    at beginWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19904)
    at performUnitOfWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23591)
    at workLoop (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23631)
    at HTMLUnknownElement.callCallback (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4428)
    at Object.invokeGuardedCallbackDev (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4478)
    at invokeGuardedCallback (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4535)
    at replayUnitOfWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:22857)
App @ app.js:10
renderWithHooks @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:17217
mountIndeterminateComponent @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19299
beginWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19904
performUnitOfWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23591
workLoop @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23631
callCallback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4428
invokeGuardedCallbackDev @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4478
invokeGuardedCallback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4535
replayUnitOfWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:22857
renderRoot @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23747
performWorkOnRoot @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24621
performWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24533
performSyncWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24507
requestWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24376
scheduleWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24190
scheduleRootUpdate @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24851
updateContainerAtExpirationTime @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24879
updateContainer @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24936
ReactRoot.render @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25232
(anonymous) @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25369
unbatchedUpdates @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24738
legacyRenderSubtreeIntoContainer @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25365
render @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25434
(anonymous) @ main.js:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:21396 The above error occurred in the <App> component:
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:21396
logError @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:21432
update.callback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:22344
callCallback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:20712
commitUpdateEffects @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:20751
commitUpdateQueue @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:20742
commitLifeCycles @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:21662
commitAllLifeCycles @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23015
callCallback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4428
invokeGuardedCallbackDev @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4478
invokeGuardedCallback @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:4535
commitRoot @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23227
(anonymous) @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24697
unstable_runWithPriority @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25889
completeRoot @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24696
performWorkOnRoot @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24625
performWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24533
performSyncWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24507
requestWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24376
scheduleWork @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24190
scheduleRootUpdate @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24851
updateContainerAtExpirationTime @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24879
updateContainer @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24936
ReactRoot.render @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25232
(anonymous) @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25369
unbatchedUpdates @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24738
legacyRenderSubtreeIntoContainer @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25365
render @ modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:25434
(anonymous) @ main.js:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24591 Uncaught TypeError: useTracker is not a function
    at App (app.js:10)
    at renderWithHooks (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:17217)
    at mountIndeterminateComponent (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19299)
    at beginWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:19904)
    at performUnitOfWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23591)
    at workLoop (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23631)
    at renderRoot (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:23714)
    at performWorkOnRoot (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24621)
    at performWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24533)
    at performSyncWork (modules.js?hash=2ce9e30d3ad145e79ef810b20822af1327a19f4b:24507)
CaptainN commented

Maybe try meteor reset - it's definitely a strange error...

yaser-alazm commented

meteor reset

No luck unfortunately!

yaser-alazm commented

@benjamn @grigio @glasser can you check this out please ?

glasser commented

Sorry, I don't work on Meteor these days!

CaptainN commented

Maybe ask in the Meteor Forums. I don't know what's going on here.

filipenevola commented

Hi @yaser-alazem, could you provide a reproduction? 😉

Read more here

We have many projects using react-meteor-data so it must be something different in your project.

Maybe you are using an old version of Meteor with an old version of react-meteor-data? useTracker is only available in newer versions.

filipenevola commented

I'm closing this issue because we haven't heard anything from the original poster for a while.