Unhandled rejection TypeError when loading page

[gordyd]

Unhandled rejection TypeError when loading page

[GordyD]

Hi @jtiscione. @snobear is correct in that you should run the app from port 3001 - which is where the Webpack Dev Server is listening on.

The reason hitting up http://localhost:3000 causes an error is because /bundle.js (which is created by Webpack Dev Server) is not available from the App server on development. See the lines below from your error report:

[x] Request for /bundle.js
Server router!

If you take a look at server.js, you can see the route configuration and in the event /bundle.js has not matched any previous routes it results in the application producing this error after app.get('*', uni.handleRender); is triggered and no React Router Route corresponding to bundle.js is found. Usually when running on production, /bundle.js will have been built and exist in the buildDirectory so this error will not occur.

I'll look into adding some debugging here in the logs (telling users to try port 3001) so that this specific case is dealt with as it seems that this error has appeared twice in Issues now.

[snobear]

RE: karma not running, you'll need to install karma-cli to be able to use karma on windows. See the Commandline Interface section on karma's site:

npm install -g karma-cli

then you can do karma start to fire the tests.

Also, I do remember having some issues getting the npm start and run commands to work correctly for me on Windows. I had to change my npm start command in package.json to look like

  "scripts": {
    "start": "set NODE_ENV=development&&node start-dev.js",

[snobear]

Hi @jtiscione - try localhost port 3001

https://github.com/GordyD/3ree#running-dev-server

[jtiscione]

But nothing is listening on 3001. Port 3000 does serve a broken page.

[GordyD]

I have updated server/app.js so that some useful logging has been added when this issue is encountered. It will look as follows:

 [x] Request for /
 [x] Request for /bundle.js
 | Hold up, are you sure you are hitting the app at http://localhost:3001.
 | On development bundle.js is served by the Webpack Dev Server and so you need to hit the app on port 3001, not port 3000.
Error: No matching universal route found

[jtiscione]

Thanks everybody, I got npm start to run. I had to change the script from this
"start": "NODE_ENV=development node server.babel.js & node server.webpack.js"
to this for on Windows:
"start": "set NODE_ENV=development && start node server.babel.js && node server.webpack.js",
because the node server.webpack.js was never running at all, nothing was listening on 3001. (I was missing the DOS "start" in the middle, so it was waiting for node server.babel.js to finish. And the double ampersands mean different things too... because using npm on Windows is so much fun.)
Now I'm getting valid responses on both 3000 and 3001.

Regarding npm test- I did npm install -g karma-cli and then changed
"test": "./node_modules/karma/bin/karma start"
to just
"test": "karma start"
I don't know what that ./node_modules/karma/bin/karma file is, but it's not an executable.

Now I get further with npm test- it produces a bunch of warnings ending with a TypeError:

START:
Hash: 27b445c0f59f2f37efaa
Version: webpack 1.13.1
Time: 4712ms
Asset Size Chunks Chunk Names
tests.webpack.js 886 kB 0 [emitted] tests.webpack.js
chunk {0} tests.webpack.js (tests.webpack.js) 814 kB [rendered]
[0] ./tests.webpack.js 3.77 kB {0} [built]
[1] ./test .js$ 205 bytes {0} [built]
[2] ./test/actions.test.js 8.29 kB {0} [optional] [built]

[... skipping a few hundred lines...]

[408] .//babel-polyfill//core-js/modules/_replacer.js 227 bytes {0} [built]
[409] ./universal/reducers/index.js 4.39 kB {0} [built]
[410] ./universal/reducers/pulse.js 7.06 kB {0} [built]

WARNING in .//sinon/lib/sinon.js
Critical dependencies:
40:25-32 require function is used in a way in which dependencies cannot be statically extracted
@ .//sinon/lib/sinon.js 40:25-32

WARNING in .//sinon/lib/sinon/assert.js
Critical dependencies:
216:25-32 require function is used in a way in which dependencies cannot be statically extracted
@ .//sinon/lib/sinon/assert.js 216:25-32

[... skipping a couple dozen similar warnings here...]

WARNING in .//sinon/lib/sinon/util/fake_xml_http_request.js
Critical dependencies:
715:25-32 require function is used in a way in which dependencies cannot be statically extracted
@ .//sinon/lib/sinon/util/fake_xml_http_request.js 715:25-32

WARNING in .//sinon/lib/sinon/walk.js
Critical dependencies:
70:25-32 require function is used in a way in which dependencies cannot be statically extracted
@ .//sinon/lib/sinon/walk.js 70:25-32
23 05 2016 19:55:34.170:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
23 05 2016 19:55:34.191:INFO [launcher]: Starting browser PhantomJS
23 05 2016 19:55:36.276:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#jnp3I_1BV2
RaFkBEAAAA with id 62020827
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
at D:/repo/3ree/tests.webpack.js:20

Finished in 0.137 secs / 0 secs

SUMMARY:
√ 0 tests completed

I don't know what to make of that yet, since I'm not familiar with karma.

[snobear]

@jtiscione Yeah, npm sucks on Windows. Its a little better if you use git-bash (assuming you like bash or Linux shells). Windows is actually going to be integrating bash in Windows 10. I hope to move over to OSX soon though and get my local dev environment closer to how my test/production Linux environments are :).

Anyway, I was just working on those exact karma issues on Windows the other day. I had to change a few things for webpack to play nicely with sinon:

karma.conf.js

       module: {
          loaders: webpackConfig.module.loaders,
          noParse: [
 -            /node_modules\/sinon/,
 +            /sinon/,
          ]
        },
 +      resolve: {
 +        alias: {
 +          sinon: 'sinon/pkg/sinon',
 +        },
 +      },

tests/actions.test.js

-import sinon from 'sinon';
 +import sinon from 'sinon/pkg/sinon';

Though you may not need to change the import statement since the resolve piece was added above. I was trying a bunch of stuff to get it working and might be a leftover. And the +/- diffs may not make total sense; could be a diff specific to my project and things I was trying. the most important point is the noParse webpack option.

[snobear]

@jtiscione all set on this?

[jtiscione]

@snobear (Sorry, for a few days your stack had me scurrying around to tutorials all over the place.)

Your changes to karma.conf.js worked; the tests are running for real now and all 8 finish successfully.

Although changing that import statement in actions.test.js makes no difference. In fact Webstorm is bitching that it's not even being used. I deleted the line and it still works fine.

BTW I'm using these scripts I added to package.json as a workaround for Windows problems; these two both work for me (assuming karma is installed globally):

    "windows-start": "set NODE_ENV=development&& start node server.babel.js&& node server.webpack.js",
    "windows-test": "karma start"

I also added two additional scripts for the production build targets:

    "windows-build:prod": "set NODE_ENV=production&& webpack",
    "windows-start:prod": "set NODE_ENV=production&& node server.babel.js"```

I'm assuming these will be what would work, but I haven't set up a build system to actually try them.

[GordyD]

@jtiscione @snobear - Any possibility of getting this work for supporting dev on Windows into the repo somehow? Also a section in the Readme would be awesome.

[snobear]

@GordyD sure I'll add a PR. I need to see what options are out there for cross platform support on the npm script commands. At the very least we can add separate npm commands for Windows, e.g. npm run start:windows, but that's not the most elegant solution.