'Uncaught ReferenceError: Mongo is not defined' when using with angular2-boilerplate #5

KeithGillette · 2017-02-13T12:12:08Z

In attempting to use Webpack for an Angular-Meteor angular2-boilerplate client build, I get the following browser console error when running the client:

Uncaught ReferenceError: Mongo is not defined
    at new Collection (eval at <anonymous> (app.js:2825), <anonymous>:41:43)
    at eval (eval at <anonymous> (app.js:5012), <anonymous>:3:26)
    at Object.<anonymous> (app.js:5012)
    at __webpack_require__ (app.js:20)
    at eval (eval at <anonymous> (app.js:2058), <anonymous>:12:25)
    at Object.<anonymous> (app.js:2058)
    at __webpack_require__ (app.js:20)
    at eval (eval at <anonymous> (app.js:5026), <anonymous>:12:27)
    at Object.<anonymous> (app.js:5026)
    at __webpack_require__ (app.js:20)
    at eval (eval at <anonymous> (app.js:5019), <anonymous>:14:24)
    at Object.<anonymous> (app.js:5019)
    at __webpack_require__ (app.js:20)
    at eval (eval at <anonymous> (app.js:5033), <anonymous>:6:10)
    at Object.<anonymous> (app.js:5033)
Collection @ VM14139:41
(anonymous) @ demo.collection.ts?6134:4
(anonymous) @ app.js:5012
__webpack_require__ @ app.js:20
(anonymous) @ demo-data.service.ts?454a:4
(anonymous) @ app.js:2058
__webpack_require__ @ app.js:20
(anonymous) @ demo.component.ts?a30f:3
(anonymous) @ app.js:5026
__webpack_require__ @ app.js:20
(anonymous) @ app.module.ts?3ae5:4
(anonymous) @ app.js:5019
__webpack_require__ @ app.js:20
(anonymous) @ index.ts?7df8:2
(anonymous) @ app.js:5033
__webpack_require__ @ app.js:20
(anonymous) @ main.ts?0945:6
(anonymous) @ app.js:2071
__webpack_require__ @ app.js:20
(anonymous) @ app.js:5097
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69

I have run meteor-client bundle with the following meteor-client.config.json adapted from the Angular-Meteor WhatsApp Clone with Meteor and Ionic 2 CLI to generate node_modules/meteor-client.js and added import 'meteor-client'; as the first line in client/main.ts.

{
  "run-time": {
    "meteorEnv": {},
    "DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
  },
  "import": {
    "[email protected]": [
      "underscore",
      "meteor",
      "modules-runtime",
      "modules",
      "promise",
      "babel-runtime",
      "ecmascript-runtime",
      "ecmascript",
      "base64",
      "ejson",
      "jquery",
      "check",
      "random",
      "tracker",
      "retry",
      "id-map",
      "ordered-dict",
      "geojson-utils",
      "diff-sequence",
      "mongo-id",
      "minimongo",
      "ddp-common",
      "ddp-client",
      "ddp",
      "allow-deny",
      "reactive-var",
      "mongo"
    ],
    "npm-bcrypt": [],
    "accounts-base": [
      "callback-hook",
      "localstorage",
      "accounts-base",
      "service-configuration"
    ]
  },
  "export": {
    "accounts-base": ["Accounts"],
    "ddp": ["DDP"],
    "meteor": ["Meteor"],
    "mongo": ["Mongo"],
    "tracker": ["Tracker"],
    "underscore": ["_"]
  }
}

In inspecting node_modules/meteor-client.js, I see the that Mongo is not included in the section that establishes global scope:

/* Imports for global scope */

Meteor = Package.meteor.Meteor;
global = Package.meteor.global;
meteorEnv = Package.meteor.meteorEnv;
WebApp = Package.webapp.WebApp;
_ = Package.underscore._;
DDP = Package['ddp-client'].DDP;
Autoupdate = Package.autoupdate.Autoupdate;
Reload = Package.reload.Reload;

Any tips on troubleshooting appreciated!

The text was updated successfully, but these errors were encountered:

DAB0mB · 2017-02-13T12:55:39Z

@KeithGillette It seems as if you're using an old version of meteor-client-bundler. Can you please try the latest version? You don't even necessarily need a config file anymore, just use the -s option like so:

$ meteor-client bundle -s ./api

KeithGillette · 2017-02-13T14:53:35Z

Thanks for the fast reply, @DAB0mB! I believe I am using the latest version, as I just installed it 2 days ago:

> meteor-client --version
0.1.1

I tried again by deleting my existing node_modules/meteor-client.js and executed meteor-client bundle -s .\meteor (I moved the server side to meteor instead of api and I'm running under Windows 10) and now I get no meteor-client.js bundle outputted to node_modules! The meteor-client bundle command runs without error. (At least so far as I can see, as it spews "Scanning local packages" and "Preparing project" all over the console, so it's hard to discern any valid output.)

If I just run meteor-client bundle with no project specified, meteor-client.js is generated in node_modules but the /* Imports for global scope */ section is identical to the previous excerpt. To get it to work, I have to manually add Mongo = Package.mongo.Mongo;

DAB0mB · 2017-02-13T16:54:25Z

@KeithGillette Try to add the mongo package explicitly in your meteor package:

$ meteor add mongo

This should make sure mongo is being exported. Don't forget to re-bundle your client!!

KeithGillette · 2017-02-13T19:26:31Z

Thanks again, @DAB0mB. Unfortunately, if I specify the directory of my embedded Meteor project, I can't reliably get the meteor-client command to generate a meteor-client.js output file. I am able to get a meteor-client.js file is by running meteor-client bundle with no switches. I was also able to get it to generate a meteor-client.js file if the --source flag specifies a fresh Meteor source directory outside of my current project. The meteor-client.js file resulting from the latter approach produced a much more robust global scope, as it was based on a project created with the --full flag:

/* Imports for global scope */

Mongo = Package.mongo.Mongo;
ReactiveVar = Package['reactive-var'].ReactiveVar;
$ = Package.jquery.$;
jQuery = Package.jquery.jQuery;
Tracker = Package.tracker.Tracker;
Deps = Package.tracker.Deps;
FlowRouter = Package['kadira:flow-router'].FlowRouter;
BlazeLayout = Package['kadira:blaze-layout'].BlazeLayout;
Meteor = Package.meteor.Meteor;
global = Package.meteor.global;
meteorEnv = Package.meteor.meteorEnv;
WebApp = Package.webapp.WebApp;
_ = Package.underscore._;
DDP = Package['ddp-client'].DDP;
LaunchScreen = Package['launch-screen'].LaunchScreen;
Blaze = Package.ui.Blaze;
UI = Package.ui.UI;
Handlebars = Package.ui.Handlebars;
Spacebars = Package.spacebars.Spacebars;
Template = Package['templating-runtime'].Template;
meteorInstall = Package.modules.meteorInstall;
Buffer = Package.modules.Buffer;
process = Package.modules.process;
Symbol = Package['ecmascript-runtime'].Symbol;
Map = Package['ecmascript-runtime'].Map;
Set = Package['ecmascript-runtime'].Set;
meteorBabelHelpers = Package['babel-runtime'].meteorBabelHelpers;
Promise = Package.promise.Promise;
Autoupdate = Package.autoupdate.Autoupdate;
Reload = Package.reload.Reload;
HTML = Package.htmljs.HTML;

DAB0mB · 2017-02-13T23:59:52Z

@KeithGillette the thing is that every package exports objects based on its definition in the package.js file. Once you require these packages their definitions will be available on the global object. You have the Mongo object available on the window, isn't that what you wanted? You will achieve the same result even if using Meteor purely. You can also remove the global-imports package which won't define anything globally, but then you will have to approach Mongo using Package.mongo.Mongo.

KeithGillette · 2017-02-14T00:45:26Z

Yes, as I've described, with one of the following work-arounds, I do successfully get Mongo available globally:

Manually add Mongo = Package.mongo.Mongo; to the meteor-client.js file produced by meteor-client bundle or meteor-client bundle --source .\meteor, meteor being the directory of the embedded Meteor server project.
Run meteor-client bundle --source path-to-external-meteor-full-project

The remaining issue is just even after running meteor add mongo in the meteor directory and confirming that meteor\.meteor\packages contains a reference to mongo meteor-client bundle --source .\meteor does not put Mongo on the global scope:

meteor.meteor\packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
[email protected]            # Reactive variable for tracker
[email protected]                 # Meteor's client-side reactive programming library

[email protected]   # CSS minifier run for production mode
[email protected]    # JS minifier run for production mode
[email protected]                # ECMAScript 5 compatibility for older browsers.

[email protected]             # Publish all data to the clients (for prototyping)
[email protected]                # Allow all DB writes from clients (for prototyping)
angular2-compilers
practicalmeteor:mocha
xolvio:cleaner
hwillson:stub-collections
dispatch:mocha-phantomjs
[email protected]
barbatus:typescript

node_modules\meteor-client.js

/* Imports for global scope */

Meteor = Package.meteor.Meteor;
global = Package.meteor.global;
meteorEnv = Package.meteor.meteorEnv;
WebApp = Package.webapp.WebApp;
_ = Package.underscore._;
DDP = Package['ddp-client'].DDP;
Autoupdate = Package.autoupdate.Autoupdate;
Reload = Package.reload.Reload;

KeithGillette · 2017-02-14T19:07:40Z

I created a fresh install as follows to test this further:

git clone https://github.com/bsliran/angular2-meteor-base .
git clone https://github.com/bsliran/angular2-meteor-base meteor
cd meteor
npm install
meteor add mongo
cd ..
meteor-client bundle .\meteor

For some reason, the resultant node_modules\meteor-client.js still doesn't have Mongo in the global scope:

/* Imports for global scope */

Meteor = Package.meteor.Meteor;
global = Package.meteor.global;
meteorEnv = Package.meteor.meteorEnv;
WebApp = Package.webapp.WebApp;
_ = Package.underscore._;
DDP = Package['ddp-client'].DDP;
Autoupdate = Package.autoupdate.Autoupdate;
Reload = Package.reload.Reload;

However, through experimentation, I found that running meteor-client bundle with the following meteor-client.config.json file, while probably containing more entries than strictly necessary,

{
  "import": [
    "meteor-base",
    "mongo",
    "reactive-var",
    "tracker",
    "es5-shim",
    "autopublish",
    "insecure"
  ]
}

generated the following global scope which finally included Mongo:

/* Imports for global scope */

Mongo = Package.mongo.Mongo;
ReactiveVar = Package['reactive-var'].ReactiveVar;
Tracker = Package.tracker.Tracker;
Deps = Package.tracker.Deps;
Meteor = Package.meteor.Meteor;
global = Package.meteor.global;
meteorEnv = Package.meteor.meteorEnv;
WebApp = Package.webapp.WebApp;
_ = Package.underscore._;
DDP = Package['ddp-client'].DDP;
Autoupdate = Package.autoupdate.Autoupdate;
Reload = Package.reload.Reload;

So maintaining a configuration file with the needed packages is much better than manually updating the meteor-client.js after rebundling.

DAB0mB · 2017-02-15T00:57:37Z

@KeithGillette maintaining a config is indeed more optimized, but I find it weird that Mongo is not added to the global scope when using --source option. I will definitely check on that.

Slavrix · 2017-06-09T02:11:34Z

I have found that when using the --source api I do get my Mongo exposed, however adding mongo to the imports doesn't expose it at all.

It would be good to get an "ignore" added to the config maybe, I have some meteor packages that cause headaches with the bundler (mainly angular2-compilers and packages related to unit and e2e tests)

So when using -s api, I remove them first, generate the meteor-client.js, then add them back in.

If I could work out the reason why I don't get the Mongo to work with the imports it would be better, because I would just define the packages i need in the config instead.

darkbasic · 2017-10-31T21:14:52Z

Closing due to inactivity and cleanup.
Feel free to open a new issue if you are still affected.

KeithGillette mentioned this issue Jun 22, 2017

Angular CLI instructions? Urigo/Ionic2CLI-Meteor-WhatsApp#82

Closed

darkbasic closed this as completed Oct 31, 2017

georgyberdyshev mentioned this issue Nov 30, 2018

AngularCLI update to Meteor 1.8.0.1 and Angular 7.1.1 Urigo/angular-meteor#1957

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'Uncaught ReferenceError: Mongo is not defined' when using with angular2-boilerplate #5

'Uncaught ReferenceError: Mongo is not defined' when using with angular2-boilerplate #5

KeithGillette commented Feb 13, 2017

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 13, 2017 •

edited

Loading

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 13, 2017

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 14, 2017

KeithGillette commented Feb 14, 2017 •

edited

Loading

DAB0mB commented Feb 15, 2017

Slavrix commented Jun 9, 2017

darkbasic commented Oct 31, 2017

'Uncaught ReferenceError: Mongo is not defined' when using with angular2-boilerplate #5

'Uncaught ReferenceError: Mongo is not defined' when using with angular2-boilerplate #5

Comments

KeithGillette commented Feb 13, 2017

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 13, 2017 • edited Loading

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 13, 2017

DAB0mB commented Feb 13, 2017

KeithGillette commented Feb 14, 2017

meteor.meteor\packages

node_modules\meteor-client.js

KeithGillette commented Feb 14, 2017 • edited Loading

DAB0mB commented Feb 15, 2017

Slavrix commented Jun 9, 2017

darkbasic commented Oct 31, 2017

KeithGillette commented Feb 13, 2017 •

edited

Loading

KeithGillette commented Feb 14, 2017 •

edited

Loading