Problems with intro tutorial "Creating an app"

Hi! I’m new to Meteor and thinking about using it for a major project. I’m going through the intro React tutorial (https://www.meteor.com/tutorials/react/creating-an-app) to get myself familiar with the platform, but now I’m stuck on Step 8.9! The browser does not render any login UI. Just a blank background. No error messages in the console.

I checked all my files carefully against the ones in github and couldn’t find any mismatch. Just to be sure, I cloned the repo and checked out the commit related to this step. But now the app crashes with the following output:

rob@rob:~/test/simple-todos-react$ meteor
[[[[[ ~/test/simple-todos-react ]]]]]         

=> Started proxy.                             
=> Meteor 1.6.1.1 is available. Update this project with 'meteor update'.
=> Started MongoDB.                           
=> Errors prevented startup:                  
   
   While processing files with cosmos:browserify (for target web.browser):
   packages/react-runtime-dev/react.browserify.js: Arguments to path.resolve must be strings
   
   Browserify options:
   >  undefined
   
   While processing files with cosmos:browserify (for target os.linux.x86_64):
   packages/react-runtime-dev/react.browserify.js: Arguments to path.resolve must be strings
   
   Browserify options:
   >  undefined
   
=> Your application has errors. Waiting for file change.

I suspect this is because some magic happens when you run meteor create simple-todos and for the cloned version of the app, I never ran this command. I did run the other meteor add ... commands to install the necessary packages.

Any help troubleshooting would be most appreciated. Otherwise, I’m very satisfied with Meteor so far!

Cheers,
Rob

After cloning the repo and before running meteor, did you meteor npm install?

No, I didn’t. Tried now, and I get a different set of errors:

rob@rob:~/test/simple-todos-react$ meteor
[[[[[ ~/test/simple-todos-react ]]]]]         

=> Started proxy.                             
                                              
Your development database is using mmapv1, the old, pre-MongoDB 3.0 database engine. You should consider upgrading to Wired Tiger, the new engine. The easiest way to do so in development is to run
meteor reset. If you'd like to migrate your database, please consult https://docs.mongodb.org/v3.0/release-notes/3.0-upgrade/
                                              
=> Started MongoDB.                           
W20180524-17:29:09.405(3)? (STDERR) WARNING: npm peer requirements (for react-runtime) not installed:
W20180524-17:29:09.424(3)? (STDERR)  - react@16.4.0 installed, react@15.x needed
W20180524-17:29:09.424(3)? (STDERR)  - react-dom@16.4.0 installed, react-dom@15.x needed
W20180524-17:29:09.424(3)? (STDERR)  - react-addons-transition-group@15.x not installed.
W20180524-17:29:09.424(3)? (STDERR)  - react-addons-css-transition-group@15.x not installed.
W20180524-17:29:09.424(3)? (STDERR)  - react-addons-linked-state-mixin@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR)  - react-addons-create-fragment@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR)  - react-addons-update@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR)  - react-addons-pure-render-mixin@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR)  - react-addons-test-utils@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR)  - react-addons-perf@15.x not installed.
W20180524-17:29:09.425(3)? (STDERR) 
W20180524-17:29:09.425(3)? (STDERR) Read more about installing npm peer dependencies:
W20180524-17:29:09.426(3)? (STDERR)   http://guide.meteor.com/using-packages.html#peer-npm-dependencies
W20180524-17:29:09.426(3)? (STDERR) 
W20180524-17:29:09.430(3)? (STDERR) /home/rob/.meteor/packages/meteor-tool/.1.6.1_1.c76v6p.io9tw++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
W20180524-17:29:09.430(3)? (STDERR) 						throw(ex);
W20180524-17:29:09.430(3)? (STDERR) 						^
W20180524-17:29:09.430(3)? (STDERR) 
W20180524-17:29:09.431(3)? (STDERR) Error: Cannot find module 'react-addons-transition-group'
W20180524-17:29:09.431(3)? (STDERR)     at Function.Module._resolveFilename (module.js:547:15)
W20180524-17:29:09.431(3)? (STDERR)     at Function.resolve (internal/module.js:18:19)
W20180524-17:29:09.431(3)? (STDERR)     at Object.require (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:288:32)
W20180524-17:29:09.431(3)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180524-17:29:09.431(3)? (STDERR)     at require (packages/modules-runtime.js:244:16)
W20180524-17:29:09.431(3)? (STDERR)     at react-runtime.js (packages/react-runtime/react-runtime.js:29:20)
W20180524-17:29:09.432(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)
W20180524-17:29:09.432(3)? (STDERR)     at require (packages/modules-runtime.js:238:16)
W20180524-17:29:09.432(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:104:15
W20180524-17:29:09.432(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:113:3
W20180524-17:29:09.432(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:411:36
W20180524-17:29:09.432(3)? (STDERR)     at Array.forEach (<anonymous>)
W20180524-17:29:09.432(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:220:19
W20180524-17:29:09.433(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:471:5
W20180524-17:29:09.433(3)? (STDERR)     at Function.run (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/profile.js:510:12)
W20180524-17:29:09.433(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:470:11
=> Exited with code: 1
W20180524-17:29:10.701(3)? (STDERR) WARNING: npm peer requirements (for react-runtime) not installed:
W20180524-17:29:10.702(3)? (STDERR)  - react@16.4.0 installed, react@15.x needed
W20180524-17:29:10.703(3)? (STDERR)  - react-dom@16.4.0 installed, react-dom@15.x needed
W20180524-17:29:10.703(3)? (STDERR)  - react-addons-transition-group@15.x not installed.
W20180524-17:29:10.703(3)? (STDERR)  - react-addons-css-transition-group@15.x not installed.
W20180524-17:29:10.703(3)? (STDERR)  - react-addons-linked-state-mixin@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR)  - react-addons-create-fragment@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR)  - react-addons-update@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR)  - react-addons-pure-render-mixin@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR)  - react-addons-test-utils@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR)  - react-addons-perf@15.x not installed.
W20180524-17:29:10.704(3)? (STDERR) 
W20180524-17:29:10.704(3)? (STDERR) Read more about installing npm peer dependencies:
W20180524-17:29:10.705(3)? (STDERR)   http://guide.meteor.com/using-packages.html#peer-npm-dependencies
W20180524-17:29:10.705(3)? (STDERR) 
W20180524-17:29:10.731(3)? (STDERR) /home/rob/.meteor/packages/meteor-tool/.1.6.1_1.c76v6p.io9tw++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
W20180524-17:29:10.731(3)? (STDERR) 						throw(ex);
W20180524-17:29:10.732(3)? (STDERR) 						^
W20180524-17:29:10.732(3)? (STDERR) 
W20180524-17:29:10.732(3)? (STDERR) Error: Cannot find module 'react-addons-transition-group'
W20180524-17:29:10.733(3)? (STDERR)     at Function.Module._resolveFilename (module.js:547:15)
W20180524-17:29:10.733(3)? (STDERR)     at Function.resolve (internal/module.js:18:19)
W20180524-17:29:10.733(3)? (STDERR)     at Object.require (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:288:32)
W20180524-17:29:10.734(3)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180524-17:29:10.734(3)? (STDERR)     at require (packages/modules-runtime.js:244:16)
W20180524-17:29:10.734(3)? (STDERR)     at react-runtime.js (packages/react-runtime/react-runtime.js:29:20)
W20180524-17:29:10.734(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)
W20180524-17:29:10.734(3)? (STDERR)     at require (packages/modules-runtime.js:238:16)
W20180524-17:29:10.735(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:104:15
W20180524-17:29:10.735(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:113:3
W20180524-17:29:10.735(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:411:36
W20180524-17:29:10.735(3)? (STDERR)     at Array.forEach (<anonymous>)
W20180524-17:29:10.736(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:220:19
W20180524-17:29:10.736(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:471:5
W20180524-17:29:10.736(3)? (STDERR)     at Function.run (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/profile.js:510:12)
W20180524-17:29:10.736(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:470:11
=> Exited with code: 1
W20180524-17:29:11.849(3)? (STDERR) WARNING: npm peer requirements (for react-runtime) not installed:
W20180524-17:29:11.849(3)? (STDERR)  - react@16.4.0 installed, react@15.x needed
W20180524-17:29:11.849(3)? (STDERR)  - react-dom@16.4.0 installed, react-dom@15.x needed
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-transition-group@15.x not installed.
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-css-transition-group@15.x not installed.
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-linked-state-mixin@15.x not installed.
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-create-fragment@15.x not installed.
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-update@15.x not installed.
W20180524-17:29:11.850(3)? (STDERR)  - react-addons-pure-render-mixin@15.x not installed.
W20180524-17:29:11.851(3)? (STDERR)  - react-addons-test-utils@15.x not installed.
W20180524-17:29:11.851(3)? (STDERR)  - react-addons-perf@15.x not installed.
W20180524-17:29:11.851(3)? (STDERR) 
W20180524-17:29:11.851(3)? (STDERR) Read more about installing npm peer dependencies:
W20180524-17:29:11.851(3)? (STDERR)   http://guide.meteor.com/using-packages.html#peer-npm-dependencies
W20180524-17:29:11.852(3)? (STDERR) 
W20180524-17:29:11.876(3)? (STDERR) /home/rob/.meteor/packages/meteor-tool/.1.6.1_1.c76v6p.io9tw++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
W20180524-17:29:11.876(3)? (STDERR) 						throw(ex);
W20180524-17:29:11.877(3)? (STDERR) 						^
W20180524-17:29:11.877(3)? (STDERR) 
W20180524-17:29:11.877(3)? (STDERR) Error: Cannot find module 'react-addons-transition-group'
W20180524-17:29:11.877(3)? (STDERR)     at Function.Module._resolveFilename (module.js:547:15)
W20180524-17:29:11.877(3)? (STDERR)     at Function.resolve (internal/module.js:18:19)
W20180524-17:29:11.877(3)? (STDERR)     at Object.require (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:288:32)
W20180524-17:29:11.878(3)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180524-17:29:11.878(3)? (STDERR)     at require (packages/modules-runtime.js:244:16)
W20180524-17:29:11.878(3)? (STDERR)     at react-runtime.js (packages/react-runtime/react-runtime.js:29:20)
W20180524-17:29:11.878(3)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)
W20180524-17:29:11.878(3)? (STDERR)     at require (packages/modules-runtime.js:238:16)
W20180524-17:29:11.878(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:104:15
W20180524-17:29:11.878(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/packages/react-runtime.js:113:3
W20180524-17:29:11.878(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:411:36
W20180524-17:29:11.879(3)? (STDERR)     at Array.forEach (<anonymous>)
W20180524-17:29:11.879(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:220:19
W20180524-17:29:11.879(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:471:5
W20180524-17:29:11.879(3)? (STDERR)     at Function.run (/home/rob/test/simple-todos-react/.meteor/local/build/programs/server/profile.js:510:12)
W20180524-17:29:11.879(3)? (STDERR)     at /home/rob/test/simple-todos-react/.meteor/local/build/programs/server/boot.js:470:11
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.

It seems that react-runtime requires react@15.x, but the tutorial calls for react@16.4.

Any ideas?

Hmm. I hate it when people say “it works for me”, but it works for me!

What I did:

$ git clone  https://github.com/meteor/simple-todos-react.git simple-todos-react
$ cd simple-todos-react
$ meteor npm install
added 110 packages in 6.103s
$ meteor

=> Started proxy.
=> A patch (Meteor 1.6.1.1) for your current release is available!
   Update this project now with 'meteor update --patch'.
=> Started MongoDB.
W20180524-15:35:56.317(1)? (STDERR) Note: you are using a pure-JavaScript implementation of bcrypt.
W20180524-15:35:56.368(1)? (STDERR) While this implementation will work correctly, it is known to be
W20180524-15:35:56.369(1)? (STDERR) approximately three times slower than the native implementation.
W20180524-15:35:56.369(1)? (STDERR) In order to use the native implementation instead, run
W20180524-15:35:56.369(1)? (STDERR)
W20180524-15:35:56.370(1)? (STDERR)   meteor npm install --save bcrypt
W20180524-15:35:56.370(1)? (STDERR)
W20180524-15:35:56.371(1)? (STDERR) in the root directory of your application.
=> Started your app.

=> App running at: http://localhost:3040/
   Type Control-C twice to stop.

Maybe try deleting your current clone of the repo and starting again?

:slight_smile:

I understand you, and thanks for trying on your end. Actually, I get the same result for the latest commit on master, but the problem seems to be the particular commit related to Step 8.9. Can you try:

$ git checkout 083e8e6b5dff73a926e6efe5848f69dd5e42f2b6
$ meteor npm install
$ meteor

Update from my side: On a whim, I rebooted my machine, made a new clone (my fourth attempt actually), and now it works perfectly at that commit. I’m not sure what the problem was. Goblins perhaps? Or maybe I just need to quit for today and go get a cold beer…

1 Like

That’s not good. The version of meteor needed for that commit is much older than the version needed for the merged master branch.

I don’t know if that’s a general problem in this repo (version mutation across commis), but it may well have some odd effects if you checkout commits in the wrong order.

Yes, I was also wondering why the tutorial links to a 1.3 branch instead of the latest one. I guess the website for the tutorial is just rather out-of-date?

Yeah - that has been raised here.

On the other hand, it doesn’t answer the original problem with your hand-crafted code, does it?

No, it doesn’t, but I’m planning to do a diff tomorrow and see where I went wrong. Anyways, thanks massively for your help. Very nice intro to Meteor community with my first forum post and to find a helpful replier!

3 Likes

Hi again, I tried to do a git diff to see where I went wrong, but this was complicated by the fact that the git repo contained .jsx files, whereas the tutorial says to create .js files. I’m really confused by this difference between the Github repo when I checkout branch 1.3-master, vs. what is linked to in the tutorial. For example, at step 8.9, there is a link to this commit: https://github.com/meteor/simple-todos-react/commit/41188d25a8b9da6e6a8eea07e2977a550d6dc427

But if I try to checkout this commit, I get an error:

$ git checkout 41188d25a8b9da6e6a8eea07e2977a550d6dc427
fatal: reference is not a tree: 41188d25a8b9da6e6a8eea07e2977a550d6dc427

so instead I ran git log and tried to find the commit related to Step 8.9, which seems to be 083e8e6b5dff73a926e6efe5848f69dd5e42f2b6.

When I checkout this commit, the .js files are replaced with .jsx files. Any idea why this is???