Webpack creating two Mongo Collections in constants (angular-meteor)

Question

I am new to Meteor, so please excuse me if this is a basic question.

I have a Meteor app, and I am also using Ionic2 following this tutorial.

But I am getting the following error at runtime when I start the Ionic client:

Error: There is already a collection named "chats"

Which I believe comes from server/collections.ts, because when I remove the export I don't get an error at startup, but when I try access the page that uses the collection, I get following error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./ChatsPage class ChatsPage_Host - inline template:0:0
ORIGINAL EXCEPTION: TypeError: collections_1.Chats is undefined
ORIGINAL STACKTRACE:
ChatsPage</ChatsPage.prototype.findChats@http://localhost:8100/build/js/app.bundle.js:104352:14

server/collections.ts

import {Mongo} from 'meteor/mongo';
import {Chat, Message} from 'api/models';

export const Chats = new Mongo.Collection<Chat>('chats');
export const Messages = new Mongo.Collection<Message>('messages');

Can anyone please advise?

UPDATE

I have found this, and added the following to my tsconfig.json.

"compileOnSave": false, "buildOnSave": false

but I still get the same error.

I believe I need to delete the compiled code ( .js and js.map files). Does anyone know where these are? Or is it possible to do some sort of clean?

UPDATE

In the tutorial (Step 3), it uses symlinks instead of the actual files. When I have it set up with the symlinks, I don't get this error. However, in order for it to work on a remote server, I had to replace the symlinks with the real files.

The symlinks were used in the meteor project, and pointed to the files in the Ionic project, so as to avoid duplication.

$ ln -s ../typings
$ ln -s ../tsconfig.json
$ ln -s ../tslint.json

UPDATE

I am running both inonic serve and meteor.

Maybe that's the problem? My dir structure:

/theWhoZoo (ionic app)
/theWhoZoo/api (meteor app)

I run:

/theWhoZoo/ionic serve
/theWhoZoo/api/meteor

The reason I did this is because the tutorial did this.

UPDATE

I think the problem is the following, but I don't know how to solve it.

As you can see from Chrome Dev Tools, there are two collections.ts. I am not sure why, but this is related to the webpack.

When I debug this, the collections.ts?97d5 runs perfectly and gets the chats collection. Then collections.ts is invoked, and has the error because chats already exists.

webpack.config.js

var camelCase = require('lodash.camelcase');
var upperFirst = require('lodash.upperfirst');
var webpack = require('webpack');

var isRelease = process.argv.indexOf('--release') > -1;

var config = module.exports = {
  entry: './app/app.ts',
  output: {
    path: __dirname + '/www/build/js',
    filename: 'app.bundle.js'
  },
  externals: [
    'cordova',
    resolveExternals
  ],
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
    alias: {
      api: __dirname + '/api/server'
    }
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  devtool: 'source-map'
};

if (isRelease) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ];
}

function resolveExternals(context, request, callback) {
  return meteorPack(request, callback) ||
    cordovaPlugin(request, callback) ||
    callback();
}

function cordovaPlugin(request, callback) {
  var match = request.match(/^cordova\/(.+)$/);
  var plugin = match && match[1];

  if (plugin) {
    plugin = camelCase(plugin);
    plugin = upperFirst(plugin);
    callback(null, 'window.cordova && cordova.plugins && cordova.plugins.' + plugin);
    return true;
  }
}

function meteorPack(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];

  if (pack) {
    callback(null, 'window.Package && Package["' + pack + '"]');
    return true;
  }
}

There is only one collections.ts, but when it runs, I can see there are two from Dev Tools.

/theWhoZoo/api/server/collections.ts

So it must be something to do with the compilation, that at run time there are two.

It looks like the error is only on the client. I have a test utility that calls the server code, and it invokes it with no errors.

I can find that it is called from:

theWhoZoo/www/build/js/app.bundle.js.map

..."webpack:///./api/server/collections.ts?97d5"...

I tried deleting this file, but it just gets regenerated from ionic serve.

Any advise appreciated.

Thank you

Answer 1

SOLUTION:

By making node_modules a symbolic link, i.e. only having one node_modules, fixed this.