[SOLVED] Help with todos-master, new developer

Solution: I was using a route /imports/api/tests/tests.js, tests being a reserved word for the lazy / eager loading architecture in Meteor, so it was a matter of changing all the words containing tests, including the path and filename.

Hello. I was a former meteor developer, back in the times where npm was still not there. I am trying to jump back in for a personal project and everything has changed so much I no longer know if it is worth it (do I have any knowledge that could be useful today?), and the tutorials are far from being as comprehensive as they were before. I am following the todos-master tutorial. For some reason, I am unable to import from the API folder when rendering a page with kadira flow router.

This is the js of the page:

// file in /imports/ui/pages/home.js

import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/kadira:flow-router';

import {Tests} from '/imports/api/tests/tests.js';
import './home.html';

And then, my collection + schema

// file in /imports/api/tests/tests.js
import {Mongo} from 'meteor/mongo';

Just doing the import throws the following error when accesing the page:

Uncaught SyntaxError: Unexpected token import
There is no route for the path: /

Can someone help me out in this?

EDIT. Ok, I am reading this might have something to do with babel-runtime?

EDIT2. Adding more info

My package.json file goes like this (I will edit original post):

{
  "name": "autoreche",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "bcrypt": "^1.0.3",
    "express": "^4.15.4",
    "graphql": "^0.11.3",
    "jquery": "^3.2.1",
    "meteor-node-stubs": "~0.2.4",
    "popper.js": "^1.12.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "tether": "^1.4.0",
    "uniforms": "^1.20.3",
    "uniforms-bootstrap4": "^1.20.3"
  }
}

And, my meteor list and meteor npm list:

accounts-password            1.4.0  Password support for accounts
accounts-ui                  1.1.9  Simple templates to add login widgets to an app
autopublish                  1.0.7  (For prototyping only) Publish the entire database to all clients
blaze-html-templates         1.1.2  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                   0.8.2  Compiler plugin that supports ES2015+ in all .js files
es5-shim                     4.6.15  Shims and polyfills to improve ECMAScript 5 support
fourseven:scss               4.5.4  Style with attitude. Sass and SCSS support for Meteor.js.
kadira:blaze-layout          2.3.0  Layout Manager for Blaze (works well with FlowRouter)
kadira:flow-router           2.12.1  Carefully Designed Client Side Router for Meteor
meteor-base                  1.1.0  Packages that every Meteor app needs
mobile-experience            1.0.4  Packages for a great mobile user experience
modules                      0.10.0  CommonJS module system
mongo                        1.2.2  Adaptor for using MongoDB and Minimongo over DDP
promise                      0.9.0  ECMAScript 2015 Promise polyfill with Fiber support
reactive-var                 1.0.11  Reactive variable
seba:minifiers-autoprefixer  1.0.1  Standard minifiers used with Meteor apps by default + css autoprefixer.
shell-server                 0.2.4  Server-side component of the `meteor shell` command.
standard-minifier-js         2.1.1  Standard javascript minifiers used with Meteor apps by default.
tap:i18n                     1.8.2  A comprehensive internationalization solution for Meteor
tracker                      1.1.3  Dependency tracker to allow reactive callbacks
underscore                   1.0.10  Collection of small helpers: _.map, _.each, ...
useraccounts:core            1.14.2  Meteor sign up and sign in templates core package.
zimme:active-route           2.3.2  Active route helpers
mad@mad-VirtualBox:~/autoreche$ sudo meteor npm list -depth 0
autoreche@ /home/mad/autoreche
β”œβ”€β”€ babel-runtime@6.26.0
β”œβ”€β”€ bcrypt@1.0.3
β”œβ”€β”€ bootstrap@4.0.0-beta extraneous
β”œβ”€β”€ express@4.15.4
β”œβ”€β”€ graphql@0.11.3
β”œβ”€β”€ jquery@3.2.1
β”œβ”€β”€ meteor-node-stubs@0.2.11
β”œβ”€β”€ popper.js@1.12.5
β”œβ”€β”€ react@15.6.1
β”œβ”€β”€ react-dom@15.6.1
β”œβ”€β”€ simpl-schema@0.3.2 extraneous
β”œβ”€β”€ tether@1.4.0
β”œβ”€β”€ uniforms@1.20.3
└── uniforms-bootstrap4@1.20.3

Looks like babel-runtime is included in the package.json. Did you run meteor npm install after cloning the repo?

1 Like

Think you need to read the Meteor 1.3 upgrade instructions closely. I suspect you will need to add the ecmascript meteor package that will automatically transpile ES6. And you’ll need the babel-runtime in your package.js. This is also covered in the Meteor Guide section on upgrading.

1 Like

Thank you for your replies. The project has been created from scratch, but trying to rebuild the todos-master by my own hand, since I feel like I have a whole lot to learn now. The actual todos-master repo works seamlessly, after installing some missing npm packages, but this project I started from scratch, I cannot seem to make it work.

My package.json file goes like this (I will edit original post):

{
  "name": "autoreche",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "bcrypt": "^1.0.3",
    "express": "^4.15.4",
    "graphql": "^0.11.3",
    "jquery": "^3.2.1",
    "meteor-node-stubs": "~0.2.4",
    "popper.js": "^1.12.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "tether": "^1.4.0",
    "uniforms": "^1.20.3",
    "uniforms-bootstrap4": "^1.20.3"
  }
}

And, my meteor list and meteor npm list:

accounts-password            1.4.0  Password support for accounts
accounts-ui                  1.1.9  Simple templates to add login widgets to an app
autopublish                  1.0.7  (For prototyping only) Publish the entire database to all clients
blaze-html-templates         1.1.2  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                   0.8.2  Compiler plugin that supports ES2015+ in all .js files
es5-shim                     4.6.15  Shims and polyfills to improve ECMAScript 5 support
fourseven:scss               4.5.4  Style with attitude. Sass and SCSS support for Meteor.js.
kadira:blaze-layout          2.3.0  Layout Manager for Blaze (works well with FlowRouter)
kadira:flow-router           2.12.1  Carefully Designed Client Side Router for Meteor
meteor-base                  1.1.0  Packages that every Meteor app needs
mobile-experience            1.0.4  Packages for a great mobile user experience
modules                      0.10.0  CommonJS module system
mongo                        1.2.2  Adaptor for using MongoDB and Minimongo over DDP
promise                      0.9.0  ECMAScript 2015 Promise polyfill with Fiber support
reactive-var                 1.0.11  Reactive variable
seba:minifiers-autoprefixer  1.0.1  Standard minifiers used with Meteor apps by default + css autoprefixer.
shell-server                 0.2.4  Server-side component of the `meteor shell` command.
standard-minifier-js         2.1.1  Standard javascript minifiers used with Meteor apps by default.
tap:i18n                     1.8.2  A comprehensive internationalization solution for Meteor
tracker                      1.1.3  Dependency tracker to allow reactive callbacks
underscore                   1.0.10  Collection of small helpers: _.map, _.each, ...
useraccounts:core            1.14.2  Meteor sign up and sign in templates core package.
zimme:active-route           2.3.2  Active route helpers
mad@mad-VirtualBox:~/autoreche$ sudo meteor npm list -depth 0
autoreche@ /home/mad/autoreche
β”œβ”€β”€ babel-runtime@6.26.0
β”œβ”€β”€ bcrypt@1.0.3
β”œβ”€β”€ bootstrap@4.0.0-beta extraneous
β”œβ”€β”€ express@4.15.4
β”œβ”€β”€ graphql@0.11.3
β”œβ”€β”€ jquery@3.2.1
β”œβ”€β”€ meteor-node-stubs@0.2.11
β”œβ”€β”€ popper.js@1.12.5
β”œβ”€β”€ react@15.6.1
β”œβ”€β”€ react-dom@15.6.1
β”œβ”€β”€ simpl-schema@0.3.2 extraneous
β”œβ”€β”€ tether@1.4.0
β”œβ”€β”€ uniforms@1.20.3
└── uniforms-bootstrap4@1.20.3

What I cannot get to understand is, why is the import statement (or any other ES2015 statement) failing when I code it inside /imports/api/tests/tests.js, and yet it works outside there. It would seem as if the api folder was not included in the list of directories where I could use ES2015? Just my thoughts there, I am too noob yet to ascertain anything.

Well, thank you both for the help, I finally solved it. The problem was that I was using β€œtests” as in a β€œQuestionaire” for the name of my collection, and it is a reserved word for Meteor, so you cannot name it like that. I just changed the name of the folder and file /imports/api/tests/tests.js for /imports/api/questionaires/questionaires.js, and its done and done. I will reflect the solution in the original post. Thank you again! Call out to hexsprite for pointing me to the Meteor 1.3 upgrade guide, which led me to the tests issue.

1 Like