CODEWITHSUNDEEP
node.jsmongodbmeteor
Carson Barry
Carson Barry

Reputation: 33

How to resolve Uncaught ReferenceError: COLLECTION is not defined at <anonymous>:1:1 in Meteor.js/MongoDB

I am taking a full stack course via Eduonix.com. It seems that some of the code syntax is deprecated, as I have had to install older versions of multiple things to get through some of the sections. This did not help when I came to the Meteor.js section, so I installed the most recent and did some searching that allowed me to get through the first lesson. I tried the same for the second lesson (when I encountered this error), but have not had any luck with anything I have found.

I get this error when I try to use

todos.find().fetch()

in the browser's console.

Relevant File Structure:

client
--main.html
--main.js
lib
--collections.js

View on github

In the course lesson, the line

import { Todos } from '../lib/collections';

is not present in main.js and the line

export const Todos = new Mongo.Collection('todos');

in collections.js is presented as

Todos = new Mongo.Collection('todos');

I have tried changing 

import { Todos } from '../lib/collections';

to

import { Todos } from '/lib/collections';

but it did nothing.

I have also tried just adding

Todos = new Mongo.Collection('todos');

to main.js, but I got an error that said "todos" was already defined (only to get the same undefined error when I tried to run the console command, because somehow it was both already defined and is still undefined).

I have made these changes based on looking up similar issues online before making this post, hoping that it would save me like adding

import './main.html';

to main.js did when I was getting a similar undefined error related to that prior to this error.

main.html

<head>
  <title>QuickTodos</title>
</head>

<body>
  {{> main}}
</body>

<Template name="main">
  <header>
    <h1>{{title}}</h1>
  </header>
  <ul>
    {{#each todos}}
      {{> todo}}
    {{/each}}
  </ul>
</template>

<template name="todo">
  <li>{{text}}</li>
</Template>

main.js

import { Template } from 'meteor/templating';
import './main.html';
import { Todos } from '../lib/collections';

const todos = [
  {text:'Pickup kids from school'},
  {text:'Go food shopping'},
  {text:'Meeting with boss'}
];

Template.main.helpers({
  title(){
    return 'QuickTodos';
  },
  todos(){
    return todos;
  }
});

collections.js

import {Mongo} from 'meteor/mongo';

export const Todos = new Mongo.Collection('todos');

When I run 

todos.find().fetch()

I expect to get an empty array, but instead I get:

VM1905:1 
Uncaught ReferenceError: todos is not defined
    at <anonymous>:1:1

What am I doing wrong?

Upvotes: 3

Views: 2113

Answers (1)

coagmano
coagmano

Reputation: 5671

The first thing I notice is that the capitalization of these two lines are different, meaning they will point to different variables (thus, todos is not defined):

export const Todos = new Mongo.Collection('todos');
todos.find().fetch()

The second thing, is that because Meteor uses CommonJS modules, any variables you declare will be local to that module, and won't be available on the console.
(there's some exceptions, like the Todos declared without var, let, or const, which will be scoped across the whole application, but still not global or available in the console)

You can force a variable to be global by adding it as a property to the window:

import { Mongo } from 'meteor/mongo';
export const Todos = new Mongo.Collection('todos');
window.Todos = Todos; // here we make it global

And then as long as this file is imported by client/main.js, you can use Todos on the console.

This is fine for small apps and testing stuff, but increases the likelihood of name collisions and makes it harder to understand where code is coming from in larger apps.

If you want to do things the "right" way for a module system, you can access the exports of a module in the console with require:

> Todos = require('/lib/collections').Todos

Upvotes: 2

Related Questions