Migrating to Meteor 1.3

Hi, I am trying to make a node.js app to meteor 1.3. In the nodejs app, it used express module. In the material that I read, meteor 1.3 can use npm package easily. Do I need to changing express to iron route or I can just install express and then keep the orginal code there?

Actually, I tried to use express directly (‘meteor install --save express’ and then import it). It produced many errors. I also read Is there an easy way to convert an express app to meteor?. I knew that before 1.3, there a some work to change express to iron route. Is it still the same in 1.3?

Yeah right now it isn’t too easy to use express instead of connect, the web server Meteor uses internally. Are you using express for a server side rest API?

Thank you for your quick response. Yes. It is rest API. It is quite simple in the code (currently is just a small app for return media content). Only app.get() (not post …)

First error is W20160613-18:20:06.263(2)? (STDERR) .meteor/packages/meteor-tool/.1.3.2_4.10vjklo++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267

Then there are some client side js code not defined. EX jQuery, CKEDIT …
The client js code is sent to client in the res of app.get("/", function(req, res) …

When I use the import syntax as shown in the Meteor guide, like this: “import { BaseModel } from ‘/imports/api/vocabulary/BaseModel.js’;” – I get a runtime error “babel-runtime.js:32 Uncaught TypeError: Super expression must either be null or a function, not undefined” at line 32 in babel-runtime in the inherits function. Looking at the stack, I find that inherits is called by an anonymous function that reads" _inherits(VocabularyModel, _BaseModel);" but _BaseModel is undefined.

When I remove the curly braces, so that the import reads “import BaseModel from ‘/imports/api/vocabulary/BaseModel.js’;” – it works as expected. So either the code or the guide is wrong. But the books I read about es6 do show these braces.

I am using meteor 1.3.2.4 and this list of meteor packages:
ajduke:bootstrap-tagsinput 0.7.1 jQuery plugin providing a Twitter Bootstrap user interface f…
aldeed:collection2 2.9.1 Automatic validation of insert and update operations on the …
aldeed:simple-schema 1.5.3 A simple schema validation object with reactivity. Used by c…
audit-argument-checks 1.0.7 Try to detect inadequate input sanitization
blaze-html-templates 1.0.4 Compile HTML templates into reactive UI with Meteor Blaze
browser-policy 1.0.9 Configure security policies enforced by the browser
check 1.2.3 Check whether a value matches a pattern
ecmascript 0.4.5 Compiler plugin that supports ES2015+ in all .js files
ejson 1.0.12 Extended and Extensible JSON library
es5-shim 4.5.12 Shims and polyfills to improve ECMAScript 5 support
jquery 1.11.9 Manipulate the DOM using CSS selectors
less 2.6.2 Leaner CSS language
meteor-base 1.0.4 Packages that every Meteor app needs
meteorhacks:fast-render 2.14.0 Render your app before the DDP connection even comes alive …
mobile-experience 1.0.4 Packages for a great mobile user experience
mongo 1.1.9 Adaptor for using MongoDB and Minimongo over DDP
reactive-var 1.0.10 Reactive variable
session 1.1.6 Session variable
standard-minifier-css 1.0.7 Standard css minifier used with Meteor apps by default.
standard-minifier-js 1.0.7 Standard javascript minifiers used with Meteor apps by default.
tracker 1.0.14 Dependency tracker to allow reactive callbacks
twbs:bootstrap 3.3.6 The most popular front-end framework for developing responsi…
ultimatejs:tracker-react 1.0.5 No-Config reactive React Components with Meteor. Apply as co…
underscore 1.0.9 Collection of small helpers: _.map, _.each, …

Addendum: it’s even worse. With react-router, I have to use the curly braces in the import statement. Without them, react-router produces these runtime errors:

Warning: Failed propType: Invalid prop ‘component’ supplied to ‘Route’.
Warning: [react-router] Invalid undefined 'component supplied to ‘Route’.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ‘RouterContext’.

Conclusions: import statement support is a real mess. Sometimes you MUST use the curly brace syntax, and sometimes it doesn’t work at all.

I think you should read up a bit more about import syntax. The curly braces aren’t optional! Without braces, you are importing a default export; with them, you import a named export.

So you can’t import stuff from react router without the braces, since you need to use named imports.

Ah, I see what you mean. Reading further, I find that braces are not used when importing something that was exported as a default, and are required when importing something that was not exported by default. In other words, the importing module must know how the exporting was done. 2 of the 4 possible combinations of importing/exporting default/explicit not only don’t work but get you hard-to-decipher runtime errors.

That’s certainly a surprise, but it is my mistake.

A suggestion: it would help other newbies, like me, if the Meteor Guide mentioned this trap.

It would help even more if the discussion of package structure and importing were organized in one place. I’ve spent more time than I want to think about making sure that all the pieces of my application – code, .css, .less, etc. – are put in a place with the right imports to make sure that they get loaded properly. Right now, that discussion is in multiple Guide articles.

1 Like

I’m upgrading from 1.2.1 to 1.3.5.1. I started fresh on a new server. I git pulled my project and I ran

meteor update
meteor remove meteorhacks:npm npm-container

I have two questions

I changed all my npm’s from ‘Meteor.npmrequire’ and ‘npm.require’ to ‘import…’. And tested to see what broke. Yet, it’s still working as far as I can tell. But I didn’t make an ‘import’ directory.

1) If I don’t have an ‘import’ directory how am I still able to use import foo from 'foo' ?


Also, meteor 1.3 created a ‘node_modules’ directory in the root of my app but in the migration instructions, we’re told.

If you are using app-local packages to control load order and write unit tests for your application, we recommend you switch to using modules:

  1. Remove code related to the Package API from the package.js files and rename them to index.js,
  2. Move your local packages to the imports/ directory.

2) Am I supposed to delete this new 'node_module’s directory and move all those ‘node_modules’ into the ‘imports’ directory? I’m so confused.

I don’t know if this solves your question, but the imports folder is for your own files, f.e. React components or other things like startup.js. It is needed if you want to control the loading order by yourself. If you do import test from ‘test’, Meteor will look for a node package called ‘test’ within node_modules folder, not imports. If you want to import something from imports, you need to do something like

import Menu from 'imports/client/ui/menu';

and the other example, f.e. if you did npm install moment --save:

import moment from 'moment';

It should be mentioned in the guide that the upgrade to Android SDK 23 in Meteor 1.3 results in a change in the Android permission system. An app that relied on setting the permissions in the manifest must now set them programmatically. Otherwise, accessing sensitive resources won’t be possible on Android 6 Marshmallow.

An app that is bound to an earlier version of the SDK still works on Marshmallow, though, so it’s quite hard to find the reason. It took me two days to figure out why upgrading Meteor to 1.3+ broke access to the camera without any helpful error messages returned by getUserMedia().

I’m using this Cordova plugin now to set the permissions for Marshmallow and beyond:

Would you mind submitting a pull-request to the Guide with instructions?

1 Like