We Keep Coding

Index pages in a react application and naming conventions with folder structure

I'm really trying to get an idea from other Javascript developers opinion on file name and structure. My main concern is using the file name index.tsx(or js) inside a lone folder if there would be issues if a fellow developer were to come in and pick up where I left off.
Below is the file structure I currently have and you can see that each page and component is separated into its own folder and using the index.tsx naming convention. Should for example the About page have the file name and folder structure of "./About/about.tsx" or does the naming convention I have in place now work just fine of "./About/index.tsx"?
Only real difference I can see is when importing the file into another it'll have a slightly longer file path.
├─ src
│ ├─ App.tsx
│ ├─ components
│ │ ├─ ArrowIcon
│ │ │ └─ index.tsx
│ │ ├─ Footer
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ FormError
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Header
│ │ │ ├─ header.module.css
│ │ │ ├─ index.tsx
│ │ │ ├─ Logo
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ └─ Navigation
│ │ │ ├─ PrimaryNav.tsx
│ │ │ ├─ SecondaryNav.tsx
│ │ │ └─ styles.module.css
│ │ ├─ IntroHeader
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Layout
│ │ │ ├─ Container
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ index.module.css
│ │ │ └─ index.tsx
│ │ └─ PageHeader
│ │ ├─ index.tsx
│ │ └─ styles.module.css
│ ├─ Content
│ │ ├─ Configuration
│ │ │ └─ ConfigurationHome.ts
│ │ ├─ Footer
│ │ │ └─ footer.json
│ │ ├─ Home
│ │ │ ├─ About.json
│ │ │ ├─ FAQ.ts
│ │ │ └─ Tutorial.json
│ │ ├─ Navigation
│ │ │ └─ index.ts
│ │ ├─ Sagacity
│ │ │ ├─ History
│ │ │ │ └─ HistoryContent.ts
│ │ │ ├─ Management
│ │ │ │ └─ ManagementContent.ts
│ │ │ └─ SagacityContent.ts
│ │ ├─ Support
│ │ │ └─ supportHome.ts
│ │ └─ Terminal
│ │ └─ terminalHome.ts
│ ├─ index.css
│ ├─ main.tsx
│ ├─ pages
│ │ ├─ Configuration
│ │ │ ├─ BusinessUnits
│ │ │ │ ├─ BusinessUnits
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ styles.module.css
│ │ │ │ └─ SupportContacts
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Merchants
│ │ │ │ ├─ BillingGroupChains
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroupDisbursementHold
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroups
│ │ │ │ │ ├─ Edit
│ │ │ │ │ │ └─ [id].tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FeeTemplates
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ PaymentChannels
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RelationshipManager
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ ODFIs
│ │ │ │ ├─ BankExpenses
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ ├─ index.tsx
│ │ │ │ │ │ └─ styles.module.css
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ExpenseBatch
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FinancialInstitution
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RoutingNumbers
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Partners
│ │ │ │ ├─ Create
│ │ │ │ │ ├─ index.tsx
│ │ │ │ │ └─ styles.module.css
│ │ │ │ ├─ Details
│ │ │ │ │ ├─ index.tsx
│ │ │ │ │ └─ styles.module.css
│ │ │ │ └─ index.tsx
│ │ │ ├─ Profiles
│ │ │ │ ├─ APIProfiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ExternalUsers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ HeartlandUsers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ styles.module.css
│ │ │ └─ System
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Home
│ │ │ ├─ About
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Contact
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Faq
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ HealthCheck
│ │ │ │ └─ index.tsx
│ │ │ ├─ Tutorial
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ └─ VersionHistory
│ │ │ └─ index.tsx
│ │ ├─ Sagacity
│ │ │ ├─ History
│ │ │ │ ├─ AuthenticationRequests
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BankAccounts
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Consumers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FailedAPICalls
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ History
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Statistics
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ VerificationRequests
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Management
│ │ │ │ ├─ BusinessUnits
│ │ │ │ │ ├─ Configure
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Details
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Edit
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ GIACTInvoices
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Global
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Management
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Merchants
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Users
│ │ │ │ └─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Support
│ │ │ ├─ ACHFiles
│ │ │ │ ├─ ACHEntryFinder
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ACHFiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ACHRejects
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Automation
│ │ │ │ ├─ Alerts
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Jobs
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Subscriptions
│ │ │ │ ├─ Create
│ │ │ │ │ └─ Index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Bulwark
│ │ │ │ ├─ Bulwark
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ RiskRuleConfiguration
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ RiskRuleEnforcement
│ │ │ │ └─ index.tsx
│ │ │ ├─ Consumers
│ │ │ │ ├─ Blacklist
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Consumers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ ProvisionalWhitelist
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Whitelist
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Invoices
│ │ │ │ ├─ BillingGroup
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ Partner
│ │ │ │ └─ index.tsx
│ │ │ ├─ Logging
│ │ │ │ ├─ Emails
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FailedApiCalls
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Returns
│ │ │ │ ├─ Exceptions
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ NoticeOfChange
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Reinitiations
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ReturnDetails
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ReturnFiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ ReturnReconciliations
│ │ │ │ └─ index.tsx
│ │ │ └─ styles.module.css
│ │ └─ Terminal
│ │ ├─ index.tsx
│ │ ├─ styles.module.css
│ │ └─ VirtualTerminal
│ │ └─ index.tsx
│ ├─ Utils
│ │ ├─ Enums
│ │ │ ├─ MerchantTypeId.ts
│ │ │ ├─ ODFI.ts
│ │ │ ├─ RelationshipManager.ts
│ │ │ ├─ States.ts
│ │ │ └─ SupportContactId.ts
│ │ ├─ Func
│ │ └─ Interfaces
│ │ ├─ Configuration
│ │ │ ├─ Merchants
│ │ │ │ ├─ BillingGroupChains
│ │ │ │ │ └─ BillingGroupChains.ts
│ │ │ │ ├─ BillingGroups
│ │ │ │ │ └─ BillingGroupCreate.ts
│ │ │ │ ├─ FeeTemplate
│ │ │ │ │ └─ FeeTemplate.ts
│ │ │ │ ├─ Partners
│ │ │ │ │ └─ Partners.ts
│ │ │ │ └─ RelationshipManagers
│ │ │ │ └─ RelationshipManagers.ts
│ │ │ └─ Partners
│ │ └─ NavItems.ts
│ └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts
```

What you have (with the index.ts) is totally fine and a typical pattern. However, I would tweak this by moving the component code into a separate file next to index.ts then import this and export it in the index.ts. So for example, for ArrowIcon you'd have ArrowIcon.tsx and index.tsx and index.tsx would export everything from ArrowIcon.tsx.
My reasons for that are:
Tends to be a bit easier to navigate to the component with ctrl+p in vscode (or any IDE's "go to file" functionality).
If you want that component to have sister components or maybe extra utils etc you can put them in their own file in the same folder and export them from the index file. The dev using these components does not usually care (so would use the index to grab it), but this allows all the different files you might have to optionally be imported granularly by targeting the actual file if the dev wants. This can be useful in testing scenarios or if wanting to reduce bundle sizes/have better code splitting.
Here's an example in the popular Chakra lib.
Also, I wouldn't fret over this issue. It really doesn't matter much what way you pick, just pick one and be consistent.

Angular 4 + Redux (or ngrx/store) folder and file structure

Ref to Angular official site's style guile of file structure:
https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06
If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
- containers folder hold my smart components
- components folder hold my dumb components
Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?
project root
├── src/
│ ├── app/
│ │ ├── actions/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── reducers/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── components/
│ │ │ ├── heros/
│ │ │ │ ├── hero/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ ├── ......
Is there any other better structure?

project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
containers folder hold my smart components
components folder hold my dumb components

TypeError: Cannot read property 'firstChild' of undefined While rendering the react page server side

I have used these npm dependencies while rendering the react using node on server side.
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var request = require('request');
I can not use componentDidMount because it is never called while rendering server side. So, I used componentWillMount and my final code structure is like this :
var Content = React.createClass({
displayName: 'Content',
getInitialState: function getInitialState() {
console.log('getInitialState');
return {
xyz : [],
abc : ''
};
},
componentWillMount: function componentWillMount() {
console.log('componentWillMount');
request(
'some_url',
function (error, response, body) {
console.log(response.statusCode);
if (!error && response.statusCode == 200) {
console.log('Request Call');
this.setState = {
xyz : [],
abc : ''
}
}
}.bind(this));
},
render: function render() {
console.log('render');
return React.createElement(
'div',
{
className: 'clearfix container-fluid padding-none' },
React.createElement(TopSection, { title: this.state.title, slug: this.state.slug })
);
}
});
My LifeCycle is going as follow
getInitialState
componentWillMount
render
Request Call
render
and after the render is called second time i got this error
Warning: React can't find the root component node for data-reactid
value `.1va42hea328.1.0.1`. If you're seeing this message, it
probably means that you've loaded two copies of React on the page. At this
time, only a single copy of React can be loaded at a time.
/Users/me/Desktop/Projects/silly-poke/node_modules/react/lib/ReactMount.js:715
firstChildren[0] = deepestAncestor.firstChild;
^
TypeError: Cannot read property 'firstChild' of undefined
Output of npm ls is as below :
├─┬ compression#1.6.2
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── bytes#2.3.0
│ ├─┬ compressible#2.0.8
│ │ └── mime-db#1.23.0
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── on-headers#1.0.1
│ └── vary#1.1.0
├─┬ express#4.14.0
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── array-flatten#1.1.1
│ ├── content-disposition#0.5.1
│ ├── content-type#1.0.2
│ ├── cookie#0.3.1
│ ├── cookie-signature#1.0.6
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── depd#1.1.0
│ ├── encodeurl#1.0.1
│ ├── escape-html#1.0.3
│ ├── etag#1.7.0
│ ├─┬ finalhandler#0.5.0
│ │ ├── statuses#1.3.0
│ │ └── unpipe#1.0.0
│ ├── fresh#0.3.0
│ ├── merge-descriptors#1.0.1
│ ├── methods#1.1.2
│ ├─┬ on-finished#2.3.0
│ │ └── ee-first#1.1.1
│ ├── parseurl#1.3.1
│ ├── path-to-regexp#0.1.7
│ ├─┬ proxy-addr#1.1.2
│ │ ├── forwarded#0.1.0
│ │ └── ipaddr.js#1.1.1
│ ├── qs#6.2.0
│ ├── range-parser#1.2.0
│ ├─┬ send#0.14.1
│ │ ├── destroy#1.0.4
│ │ ├─┬ http-errors#1.5.0
│ │ │ ├── inherits#2.0.1
│ │ │ └── setprototypeof#1.0.1
│ │ ├── mime#1.3.4
│ │ ├── ms#0.7.1
│ │ └── statuses#1.3.0
│ ├── serve-static#1.11.1
│ ├─┬ type-is#1.6.13
│ │ ├── media-typer#0.3.0
│ │ └─┬ mime-types#2.1.11
│ │ └── mime-db#1.23.0
│ ├── utils-merge#1.0.0
│ └── vary#1.1.0
├── parent-require#1.0.0
├─┬ react#0.14.8
│ ├─┬ envify#3.4.1
│ │ ├─┬ jstransform#11.0.3
│ │ │ ├── base62#1.1.1
│ │ │ ├─┬ commoner#0.10.4
│ │ │ │ ├─┬ commander#2.9.0
│ │ │ │ │ └── graceful-readlink#1.0.1
│ │ │ │ ├─┬ detective#4.3.1
│ │ │ │ │ ├── acorn#1.2.2
│ │ │ │ │ └── defined#1.0.0
│ │ │ │ ├─┬ glob#5.0.15
│ │ │ │ │ ├─┬ inflight#1.0.5
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ ├── inherits#2.0.1
│ │ │ │ │ ├─┬ minimatch#3.0.2
│ │ │ │ │ │ └─┬ brace-expansion#1.1.5
│ │ │ │ │ │ ├── balanced-match#0.4.1
│ │ │ │ │ │ └── concat-map#0.0.1
│ │ │ │ │ ├─┬ once#1.3.3
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ └── path-is-absolute#1.0.0
│ │ │ │ ├── graceful-fs#4.1.4
│ │ │ │ ├── iconv-lite#0.4.13
│ │ │ │ ├─┬ mkdirp#0.5.1
│ │ │ │ │ └── minimist#0.0.8
│ │ │ │ ├── private#0.1.6
│ │ │ │ ├── q#1.4.1
│ │ │ │ └─┬ recast#0.10.43
│ │ │ │ ├── ast-types#0.8.15
│ │ │ │ ├── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ │ │ └── source-map#0.5.6
│ │ │ ├── esprima-fb#15001.1.0-dev-harmony-fb
│ │ │ ├── object-assign#2.1.1
│ │ │ └─┬ source-map#0.4.4
│ │ │ └── amdefine#1.0.0
│ │ └── through#2.3.8
│ └─┬ fbjs#0.6.1
│ ├── core-js#1.2.6
│ ├─┬ loose-envify#1.2.0
│ │ └── js-tokens#1.0.3
│ ├─┬ promise#7.1.1
│ │ └── asap#2.0.4
│ ├── ua-parser-js#0.7.10
│ └── whatwg-fetch#0.9.0
├── react-dom#0.14.8
└─┬ request#2.72.0
├── aws-sign2#0.6.0
├── aws4#1.4.1
├─┬ bl#1.1.2
│ └─┬ readable-stream#2.0.6
│ ├── core-util-is#1.0.2
│ ├── inherits#2.0.1
│ ├── isarray#1.0.0
│ ├── process-nextick-args#1.0.7
│ ├── string_decoder#0.10.31
│ └── util-deprecate#1.0.2
├── caseless#0.11.0
├─┬ combined-stream#1.0.5
│ └── delayed-stream#1.0.0
├── extend#3.0.0
├── forever-agent#0.6.1
├─┬ form-data#1.0.0-rc4
│ └── async#1.5.2
├─┬ har-validator#2.0.6
│ ├─┬ chalk#1.1.3
│ │ ├── ansi-styles#2.2.1
│ │ ├── escape-string-regexp#1.0.5
│ │ ├─┬ has-ansi#2.0.0
│ │ │ └── ansi-regex#2.0.0
│ │ ├─┬ strip-ansi#3.0.1
│ │ │ └── ansi-regex#2.0.0
│ │ └── supports-color#2.0.0
│ ├─┬ commander#2.9.0
│ │ └── graceful-readlink#1.0.1
│ ├─┬ is-my-json-valid#2.13.1
│ │ ├── generate-function#2.0.0
│ │ ├─┬ generate-object-property#1.2.0
│ │ │ └── is-property#1.0.2
│ │ ├── jsonpointer#2.0.0
│ │ └── xtend#4.0.1
│ └─┬ pinkie-promise#2.0.1
│ └── pinkie#2.0.4
├─┬ hawk#3.1.3
│ ├── boom#2.10.1
│ ├── cryptiles#2.0.5
│ ├── hoek#2.16.3
│ └── sntp#1.0.9
├─┬ http-signature#1.1.1
│ ├── assert-plus#0.2.0
│ ├─┬ jsprim#1.3.0
│ │ ├── extsprintf#1.0.2
│ │ ├── json-schema#0.2.2
│ │ └── verror#1.3.6
│ └─┬ sshpk#1.8.3
│ ├── asn1#0.2.3
│ ├── assert-plus#1.0.0
│ ├── dashdash#1.14.0
│ ├── ecc-jsbn#0.1.1
│ ├── getpass#0.1.6
│ ├── jodid25519#1.0.2
│ ├── jsbn#0.1.0
│ └── tweetnacl#0.13.3
├── is-typedarray#1.0.0
├── isstream#0.1.2
├── json-stringify-safe#5.0.1
├─┬ mime-types#2.1.11
│ └── mime-db#1.23.0
├── node-uuid#1.4.7
├── oauth-sign#0.8.2
├── qs#6.1.0
├── stringstream#0.0.5
├── tough-cookie#2.2.2
└── tunnel-agent#0.4.3
means there is no other version of react loading as i have seen problem on searching this error.

Your problem is you are making a request inside componentWillMount. componentWillMount is called even for server side rendering so when this request comes back it'll try to setState on a component that doesn't exist (since server side rendering uses renderToString).
Move the request to componentDidMount so it only gets called on the client.
Additionally, if you'd still like to fetch data before rendering on the server then use something like redux-async-connect.

Electron error on canceling file open dialog

When I press the cancel button on file open dialog (code below) I receive the following error:
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Error processing argument -1.
at TypeError (native)
at [object Object].Object.defineProperty.set (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/web-contents.js:92:24)
at main.js:37:20
at Function.wrappedCallback (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/dialog.js:80:16)
The error is presented as a modal popup:
I have only tested on a Mac so far.
My code is as follows:
The main process code that handles the creation of dialog is as follows:
import electron, { ipcMain } from 'electron'
const app = electron.app
const BrowserWindow = electron.BrowserWindow
electron.crashReporter.start()
let mainWindow = null
app.on('window-all-closed', () => {
if (process.platform != 'darwin') app.quit()
})
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', () => {
mainWindow = null
})
ipcMain.on('file:open', (e, arg) => {
electron.dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters: [{
name: 'Outlines',
extensions: ['pxo']
}]
}, (filePathList) => {
debugger
e.returnValue = filePathList
})
})
})
My debugger statement is never reached. Also the code works fine when some files are actually selected, and only fails if cancel is pressed.
The code (ES6+JSX) that triggers the IPC call is as follows:
class Welcome extends React.Component {
render() {
const styles = this.getStyles()
return (
<div style={styles.outerContainer}>
<a style={styles.btnSetLink} onClick={this.initFileSelection.bind(this)}>
Open File
</a>
</div>
)
}
initFileSelection() {
const filePathList = ipcRenderer.sendSync('file:open')
}
...
The code is processed through babel 6. My .babelrc is as follows:
{
"presets": ["react", "es2015"]
}
Version of electron: v0.35.1.
Versions of babel dependencies:
├─┬ babel-preset-es2015#6.3.13
│ ├── babel-plugin-check-es2015-constants#6.3.13
│ ├── babel-plugin-transform-es2015-arrow-functions#6.3.13
│ ├── babel-plugin-transform-es2015-block-scoped-functions#6.3.13
│ ├─┬ babel-plugin-transform-es2015-block-scoping#6.3.13
│ │ ├─┬ babel-template#6.3.13
│ │ │ └── babylon#6.3.18
│ │ ├─┬ babel-traverse#6.3.19
│ │ │ ├── babylon#6.3.18
│ │ │ ├── globals#8.15.0
│ │ │ └─┬ repeating#1.1.3
│ │ │ └─┬ is-finite#1.0.1
│ │ │ └── number-is-nan#1.0.0
│ │ └─┬ babel-types#6.3.18
│ │ ├── esutils#2.0.2
│ │ └── to-fast-properties#1.0.1
│ ├─┬ babel-plugin-transform-es2015-classes#6.3.15
│ │ ├── babel-helper-define-map#6.3.13
│ │ ├── babel-helper-function-name#6.3.15
│ │ ├── babel-helper-optimise-call-expression#6.3.13
│ │ ├── babel-helper-replace-supers#6.3.13
│ │ └── babel-messages#6.3.18
│ ├── babel-plugin-transform-es2015-computed-properties#6.3.13
│ ├── babel-plugin-transform-es2015-destructuring#6.3.15
│ ├── babel-plugin-transform-es2015-for-of#6.3.13
│ ├── babel-plugin-transform-es2015-function-name#6.3.19
│ ├── babel-plugin-transform-es2015-literals#6.3.13
│ ├─┬ babel-plugin-transform-es2015-modules-commonjs#6.3.16
│ │ └── babel-plugin-transform-strict-mode#6.3.13
│ ├── babel-plugin-transform-es2015-object-super#6.3.13
│ ├─┬ babel-plugin-transform-es2015-parameters#6.3.18
│ │ ├─┬ babel-helper-call-delegate#6.3.13
│ │ │ └── babel-helper-hoist-variables#6.3.13
│ │ └── babel-helper-get-function-arity#6.3.13
│ ├── babel-plugin-transform-es2015-shorthand-properties#6.3.13
│ ├── babel-plugin-transform-es2015-spread#6.3.14
│ ├─┬ babel-plugin-transform-es2015-sticky-regex#6.3.13
│ │ └── babel-helper-regex#6.3.13
│ ├── babel-plugin-transform-es2015-template-literals#6.3.13
│ ├── babel-plugin-transform-es2015-typeof-symbol#6.3.13
│ ├─┬ babel-plugin-transform-es2015-unicode-regex#6.3.13
│ │ └─┬ regexpu#1.3.0
│ │ ├── esprima#2.7.1
│ │ ├─┬ recast#0.10.33
│ │ │ ├── ast-types#0.8.12
│ │ │ └── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ ├── regenerate#1.2.1
│ │ ├── regjsgen#0.2.0
│ │ └─┬ regjsparser#0.1.5
│ │ └── jsesc#0.5.0
│ └─┬ babel-plugin-transform-regenerator#6.3.18
│ ├── babel-core#6.3.17
│ ├── babel-plugin-syntax-async-functions#6.3.13
│ ├── babylon#6.3.18
│ └── private#0.1.6
├─┬ babel-preset-react#6.3.13
│ ├── babel-plugin-syntax-flow#6.3.13
│ ├── babel-plugin-syntax-jsx#6.3.13
│ ├── babel-plugin-transform-flow-strip-types#6.3.15
│ ├── babel-plugin-transform-react-display-name#6.3.13
│ ├─┬ babel-plugin-transform-react-jsx#6.3.13
│ │ └── babel-helper-builder-react-jsx#6.3.13
│ └── babel-plugin-transform-react-jsx-source#6.3.13
├─┬ babel-register#6.3.13
│ ├─┬ babel-core#6.3.17
│ │ ├─┬ babel-code-frame#6.3.13
│ │ │ ├─┬ chalk#1.1.1
│ │ │ │ ├── ansi-styles#2.1.0
│ │ │ │ ├── escape-string-regexp#1.0.3
│ │ │ │ ├─┬ has-ansi#2.0.0
│ │ │ │ │ └── ansi-regex#2.0.0
│ │ │ │ ├── strip-ansi#3.0.0
│ │ │ │ └── supports-color#2.0.0
│ │ │ ├── js-tokens#1.0.1
│ │ │ └─┬ line-numbers#0.2.0
│ │ │ └── left-pad#0.0.3
│ │ ├─┬ babel-generator#6.3.19
│ │ │ ├─┬ detect-indent#3.0.1
│ │ │ │ ├── get-stdin#4.0.1
│ │ │ │ └── minimist#1.2.0
│ │ │ ├── is-integer#1.0.6
│ │ │ └── trim-right#1.0.1
│ │ ├── babel-helpers#6.3.13
│ │ ├── babylon#6.3.18
│ │ ├── convert-source-map#1.1.2
│ │ ├─┬ debug#2.2.0
│ │ │ └── ms#0.7.1
│ │ ├── json5#0.4.0
│ │ ├─┬ minimatch#2.0.10
│ │ │ └─┬ brace-expansion#1.1.2
│ │ │ ├── balanced-match#0.3.0
│ │ │ └── concat-map#0.0.1
│ │ ├── path-is-absolute#1.0.0
│ │ ├── shebang-regex#1.0.0
│ │ ├── slash#1.0.0
│ │ └── source-map#0.5.3
│ ├── babel-runtime#5.8.34
│ ├── core-js#1.2.6
│ ├─┬ home-or-tmp#1.0.0
│ │ ├── os-tmpdir#1.0.1
│ │ └── user-home#1.1.1
│ ├── lodash#3.10.1
│ ├── path-exists#1.0.0
│ └─┬ source-map-support#0.2.10
│ └─┬ source-map#0.1.32
│ └── amdefine#1.0.0
Any help resolving the error would be highly appreciated.

Same problem here, I solved it by coercing return value to false (it is undefined otherwise):
ipc.on 'request:save:dialog', (event, params) ->
params||={}
event.returnValue = dialog.showSaveDialog(params) || false

i use this to handle it
process.on('uncaughtException', function (exception) {
// handle or ignore error
});

For my case, I din't have any javascript error on the UI nor in the console. The app would just quit like you just closed it normally after cancelling the file open dialog. This was happening when I was using electron version 5. Updating to version 8 resolved this issue.

Very weird Mongoose/MongoDB issue when running MEAN site on Openshift

I have uploaded a site to Openshift...I have had to make many changes...including learning about version-ing and nvm (Node Version Manager). I had to go through a lot of npm version stuff just to make the requests happen (namely, the server used express version 3.2.5, while I was using 4.2.0, locally). Anyway, now I am on this weird problem where the mongoose function - Model.findById() simply doesn't seem to be able to find an object that is clearly in the database by the _id attribute. The flow is like this (and you can see it for yourself here - http://hackabox-eamonbenproject.rhcloud.com - my project):
When I try to load a post on the page where you can view all the post info...the GET request happens, a route is called by express here:
app.get('/api/posts/:id', api.showinfo);
That api.showinfo function is this currently (although I have tried many different things):
exports.showinfo = function(req, res, next) {
var postId = req.params.id;
Post.findById(postId, function (err, post) {
console.log("what did u find?" + post);
res.send({ postinfo: post.postinfo });
//res.json(post);
});
};
That console.log("what did u find?" + post) outputs null, which means that something with mongoose's findById function is going wrong.
I have logged to make sure that postId is the correct id...so that isn't the problem. I have also tried changing res.send({ postinfo: post.postinfo }); to res.json(post), res.send(post.postinfo), res.send({ profile: post.postinfo }) - with no luck.
Does anyone know why findById might not be finding anything...the post.postinfo refers to my Mongoose virtual schema which looks like this:
PostSchema
.virtual('postinfo')
.get(function() {
return {
'_id': this._id,
'posttitle': this.posttitle,
'content': this.content,
'username': this.username,
'date': this.date
};
});
I thought using it with res.send how it is used in the user auth system in my seed might work - it is used there like this - and it works fine:
exports.show = function (req, res, next) {
var userId = req.params.id;
User.findById(userId, function (err, user) {
if (err) return next(err);
if (!user) return res.send(404);
res.send({ profile: user.profile });
});
};
For some reason when I use it with the Post model I made, it doesn't want to work on Openshift, I'm pretty sure it works locally.
Any ideas?
UPDATE
After downgrading my MongoDB version locally to 2.4.6 (same as openshift server version) - the site started having the same problems locally that it does on the server...so it is definitely an environment issue - I'm guessing that some of the packages that depend on Mongo need their versions changed too - so I am going to try that and see if that helps. It seems to be a problem with conflicting versions within the seed when I run it locally now - here are all the mongo related npm packages from my package.json file:
{
"name": "hackabox",
"version": "0.0.0",
"dependencies": {
...
"mongoose": "~3.8.8",
"connect-mongo": "mrzepinski/connect-mongo#2135988",
...
},
...
}
Does anyone know what versions to use for MongoDB v2.4.6?
UPDATE
I tried Mongoose v3.5.0 and it doesn't work - I was looking at the commit dates and it seemed like around the time that MongoDB v2.4.6 was released. What other packages need to be updated/downgraded to sync with the openshift server?
UPDATE
Did a few things, with no luck - but ultimately I ended up ssh-ing into the openshift server and running:
npm list -g --depth=0
It responded with an EACCES error - but it also spat out all the version numbers anyway - so here they are:
glob error { [Error: EACCES, readdir '/opt/rh/nodejs010/root/usr/lib/node_modules/npm/man']
errno: 3,
code: 'EACCES',
path: '/opt/rh/nodejs010/root/usr/lib/node_modules/npm/man' }
/opt/rh/nodejs010/root/usr/lib
├── abbrev#1.0.4
├── ansi#0.2.1
├── ansicolors#0.3.2
├── ansistyles#0.1.3
├── archy#0.0.2
├── asn1#0.1.11
├── assert-plus#0.1.4
├── async#0.2.9
├── aws-sign#0.3.0
├── bignumber.js#1.1.1
├── block-stream#0.0.7
├── boom#0.4.2
├── bson#0.2.3
├── buffer-crc32#0.2.1
├── bytes#0.2.1
├── child-process-close#0.1.1
├── chmodr#0.1.0
├── chownr#0.0.1
├── cmd-shim#1.1.0
├── colors#0.6.2
├── columnify#0.1.2
├── combined-stream#0.0.4
├── commander#1.1.1
├── config-chain#1.1.8
├── connect#2.7.10
├── cookie#0.1.0
├── cookie-jar#0.3.0
├── cookie-signature#1.0.1
├── couch-login#0.1.18
├── cryptiles#0.2.2
├── ctype#0.5.3
├── debug#0.7.2
├── delayed-stream#0.0.5
├── editor#0.0.5
├── express#3.2.5
├── forever-agent#0.5.0
├── form-data#0.1.1
├── formidable#1.0.14
├── fresh#0.2.0
├── fstream#0.1.25
├── fstream-ignore#0.0.7
├── fstream-npm#0.1.6
├── generic-pool#2.0.3
├── github-url-from-git#1.1.1
├── github-url-from-username-repo#0.0.2
├── glob#3.2.8
├── graceful-fs#2.0.0
├── hawk#1.0.0
├── hoek#0.9.1
├── http-signature#0.10.0
├── inherits#2.0.0
├── ini#1.1.0
├── init-package-json#0.0.14
├── json-stringify-safe#5.0.0
├── keypress#0.2.1
├── lockfile#0.4.2
├── lru-cache#2.5.0
├── methods#0.0.1
├── mime#1.2.11
├── minimatch#0.2.14
├── mkdirp#0.3.5
├── mongodb#1.3.19
├── mute-stream#0.0.4
├── mysql#2.0.0-alpha9
├── nan#0.4.4
├── node-gyp#0.12.2
├── node-static#0.6.9
├── node-uuid#1.4.1
├── nopt#2.1.2
├── normalize-package-data#0.2.8
├── npm#*
├── npm-registry-client#0.3.3
├── npm-user-validate#0.0.3
├── npmconf#0.1.12
├── npmlog#0.0.6
├── oauth-sign#0.3.0
├── once#1.3.0
├── opener#1.3.0
├── openshift-node-web-proxy#*
├── optimist#0.4.0
├── options#0.0.5
├── osenv#0.0.3
├── path-is-inside#1.0.0
├── pause#0.0.1
├── pg#0.12.3
├── promzard#0.2.0
├── proto-list#1.2.2
├── qs#0.6.5
├── range-parser#0.0.4
├── read#1.0.5
├── read-installed#0.2.4
├── read-package-json#1.1.6
├── request#2.25.0
├── require-all#0.0.8
├── retry#0.6.0
├── rimraf#2.2.6
├── semver#2.1.0
├── send#0.1.4
├── sha#1.2.1
├── sigmund#1.0.0
├── slide#1.1.5
├── sntp#0.2.4
├── supervisor#0.5.2
├── tar#0.1.19
├── text-table#0.2.0
├── tinycolor#0.0.1
├── tunnel-agent#0.3.0
├── uid-number#0.0.3
├── which#1.0.5
├── wordwrap#0.0.2
└── ws#0.4.25
Do I really need to go about making all my global npm packages the same versions as the packages that are on openshift to insure that it works (for the ones that are relevant)?
I ran npm list -g locally - and this is what I get:
/usr/lib
├─┬ bower#1.3.3
│ ├── abbrev#1.0.5
│ ├── archy#0.0.2
│ ├─┬ bower-config#0.5.0
│ │ ├── mout#0.6.0
│ │ └─┬ optimist#0.6.1
│ │ ├── minimist#0.0.8
│ │ └── wordwrap#0.0.2
│ ├── bower-endpoint-parser#0.2.1
│ ├─┬ bower-json#0.4.0
│ │ ├── deep-extend#0.2.8
│ │ └── intersect#0.0.3
│ ├── bower-logger#0.2.2
│ ├─┬ bower-registry-client#0.2.0
│ │ ├── async#0.2.10
│ │ ├─┬ bower-config#0.4.5
│ │ │ ├── mout#0.6.0
│ │ │ └─┬ optimist#0.6.1
│ │ │ ├── minimist#0.0.8
│ │ │ └── wordwrap#0.0.2
│ │ ├── lru-cache#2.3.1
│ │ ├─┬ request#2.27.0
│ │ │ ├── aws-sign#0.3.0
│ │ │ ├── cookie-jar#0.3.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.2
│ │ │ │ └─┬ combined-stream#0.0.4
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.0
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.2
│ │ │ │ └── ctype#0.5.2
│ │ │ ├── json-stringify-safe#5.0.0
│ │ │ ├── mime#1.2.11
│ │ │ ├── node-uuid#1.4.1
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ └── tunnel-agent#0.3.0
│ │ └── request-replay#0.2.0
│ ├─┬ cardinal#0.4.4
│ │ ├── ansicolors#0.2.1
│ │ └─┬ redeyed#0.4.4
│ │ └── esprima#1.0.4
│ ├─┬ chalk#0.4.0
│ │ ├── ansi-styles#1.0.0
│ │ ├── has-color#0.1.7
│ │ └── strip-ansi#0.1.1
│ ├── chmodr#0.1.0
│ ├─┬ decompress-zip#0.0.6
│ │ ├─┬ binary#0.3.0
│ │ │ ├── buffers#0.1.1
│ │ │ └─┬ chainsaw#0.1.0
│ │ │ └── traverse#0.3.9
│ │ ├── mkpath#0.1.0
│ │ ├─┬ readable-stream#1.1.13-1
│ │ │ ├── core-util-is#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.25-1
│ │ └─┬ touch#0.0.2
│ │ └── nopt#1.0.10
│ ├─┬ fstream#0.1.25
│ │ └── inherits#2.0.1
│ ├─┬ fstream-ignore#0.0.7
│ │ ├── inherits#2.0.1
│ │ └─┬ minimatch#0.2.14
│ │ └── sigmund#1.0.0
│ ├─┬ glob#3.2.9
│ │ ├── inherits#2.0.1
│ │ └─┬ minimatch#0.2.14
│ │ └── sigmund#1.0.0
│ ├── graceful-fs#2.0.3
│ ├─┬ handlebars#1.3.0
│ │ ├─┬ optimist#0.3.7
│ │ │ └── wordwrap#0.0.2
│ │ └─┬ uglify-js#2.3.6
│ │ ├── async#0.2.10
│ │ └─┬ source-map#0.1.33
│ │ └── amdefine#0.1.0
│ ├─┬ inquirer#0.4.1
│ │ ├── async#0.2.10
│ │ ├─┬ cli-color#0.2.3
│ │ │ ├── es5-ext#0.9.2
│ │ │ └─┬ memoizee#0.2.6
│ │ │ ├── event-emitter#0.2.2
│ │ │ └── next-tick#0.1.0
│ │ ├── lodash#2.4.1
│ │ ├── mute-stream#0.0.4
│ │ ├── readline2#0.1.0
│ │ └── through#2.3.4
│ ├─┬ insight#0.3.1
│ │ ├── async#0.2.10
│ │ ├─┬ configstore#0.2.3
│ │ │ ├─┬ js-yaml#3.0.2
│ │ │ │ ├─┬ argparse#0.1.15
│ │ │ │ │ ├── underscore#1.4.4
│ │ │ │ │ └── underscore.string#2.3.3
│ │ │ │ └── esprima#1.0.4
│ │ │ └── uuid#1.4.1
│ │ ├─┬ lodash.debounce#2.4.1
│ │ │ ├── lodash.isfunction#2.4.1
│ │ │ ├─┬ lodash.isobject#2.4.1
│ │ │ │ └── lodash._objecttypes#2.4.1
│ │ │ └─┬ lodash.now#2.4.1
│ │ │ └── lodash._isnative#2.4.1
│ │ ├── object-assign#0.1.2
│ │ └─┬ request#2.27.0
│ │ ├── aws-sign#0.3.0
│ │ ├── cookie-jar#0.3.0
│ │ ├── forever-agent#0.5.2
│ │ ├─┬ form-data#0.1.2
│ │ │ └─┬ combined-stream#0.0.4
│ │ │ └── delayed-stream#0.0.5
│ │ ├─┬ hawk#1.0.0
│ │ │ ├── boom#0.4.2
│ │ │ ├── cryptiles#0.2.2
│ │ │ ├── hoek#0.9.1
│ │ │ └── sntp#0.2.4
│ │ ├─┬ http-signature#0.10.0
│ │ │ ├── asn1#0.1.11
│ │ │ ├── assert-plus#0.1.2
│ │ │ └── ctype#0.5.2
│ │ ├── json-stringify-safe#5.0.0
│ │ ├── mime#1.2.11
│ │ ├── node-uuid#1.4.1
│ │ ├── oauth-sign#0.3.0
│ │ ├── qs#0.6.6
│ │ └── tunnel-agent#0.3.0
│ ├── is-root#0.1.0
│ ├── junk#0.3.0
│ ├── lockfile#0.4.2
│ ├── lru-cache#2.5.0
│ ├── mkdirp#0.3.5
│ ├── mout#0.9.1
│ ├── nopt#2.2.0
│ ├── opn#0.1.1
│ ├── osenv#0.0.3
│ ├─┬ p-throttler#0.0.1
│ │ └── q#0.9.7
│ ├─┬ promptly#0.2.0
│ │ └─┬ read#1.0.5
│ │ └── mute-stream#0.0.4
│ ├── q#1.0.1
│ ├─┬ request#2.34.0
│ │ ├── aws-sign2#0.5.0
│ │ ├── forever-agent#0.5.2
│ │ ├─┬ form-data#0.1.2
│ │ │ ├── async#0.2.10
│ │ │ └─┬ combined-stream#0.0.4
│ │ │ └── delayed-stream#0.0.5
│ │ ├─┬ hawk#1.0.0
│ │ │ ├── boom#0.4.2
│ │ │ ├── cryptiles#0.2.2
│ │ │ ├── hoek#0.9.1
│ │ │ └── sntp#0.2.4
│ │ ├─┬ http-signature#0.10.0
│ │ │ ├── asn1#0.1.11
│ │ │ ├── assert-plus#0.1.2
│ │ │ └── ctype#0.5.2
│ │ ├── json-stringify-safe#5.0.0
│ │ ├── mime#1.2.11
│ │ ├── node-uuid#1.4.1
│ │ ├── oauth-sign#0.3.0
│ │ ├── qs#0.6.6
│ │ ├─┬ tough-cookie#0.12.1
│ │ │ └── punycode#1.2.4
│ │ └── tunnel-agent#0.3.0
│ ├─┬ request-progress#0.3.1
│ │ └── throttleit#0.0.2
│ ├── retry#0.6.0
│ ├── rimraf#2.2.6
│ ├── semver#2.2.1
│ ├─┬ shell-quote#1.4.1
│ │ ├── array-filter#0.0.1
│ │ ├── array-map#0.0.0
│ │ ├── array-reduce#0.0.0
│ │ └── jsonify#0.0.0
│ ├── stringify-object#0.2.0
│ ├─┬ tar#0.1.19
│ │ ├── block-stream#0.0.7
│ │ └── inherits#2.0.1
│ ├── tmp#0.0.23
│ ├─┬ update-notifier#0.1.8
│ │ ├─┬ configstore#0.2.3
│ │ │ ├─┬ js-yaml#3.0.2
│ │ │ │ ├─┬ argparse#0.1.15
│ │ │ │ │ ├── underscore#1.4.4
│ │ │ │ │ └── underscore.string#2.3.3
│ │ │ │ └── esprima#1.0.4
│ │ │ ├── object-assign#0.1.2
│ │ │ └── uuid#1.4.1
│ │ ├─┬ request#2.27.0
│ │ │ ├── aws-sign#0.3.0
│ │ │ ├── cookie-jar#0.3.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.2
│ │ │ │ ├── async#0.2.10
│ │ │ │ └─┬ combined-stream#0.0.4
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.0
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.2
│ │ │ │ └── ctype#0.5.2
│ │ │ ├── json-stringify-safe#5.0.0
│ │ │ ├── mime#1.2.11
│ │ │ ├── node-uuid#1.4.1
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ └── tunnel-agent#0.3.0
│ │ └── semver#2.1.0
│ └── which#1.0.5
├─┬ express#3.2.5
│ ├── buffer-crc32#0.2.1
│ ├── commander#0.6.1
│ ├─┬ connect#2.7.10
│ │ ├── bytes#0.2.0
│ │ ├── cookie#0.0.5
│ │ ├── formidable#1.0.14
│ │ ├── pause#0.0.1
│ │ └── qs#0.6.5
│ ├── cookie#0.1.0
│ ├── cookie-signature#1.0.1
│ ├─┬ debug#1.0.4
│ │ └── ms#0.6.2
│ ├── fresh#0.1.0
│ ├── methods#0.0.1
│ ├── mkdirp#0.3.4
│ ├── range-parser#0.0.4
│ └─┬ send#0.1.0
│ └── mime#1.2.6
├─┬ express-generator#4.2.0
│ ├─┬ commander#1.3.2
│ │ └── keypress#0.1.0
│ └── mkdirp#0.3.5
├─┬ generator-angular#0.8.0
│ ├─┬ chalk#0.4.0
│ │ ├── ansi-styles#1.0.0
│ │ ├── has-color#0.1.7
│ │ └── strip-ansi#0.1.1
│ ├─┬ wiredep#1.0.0
│ │ ├─┬ chalk#0.1.1
│ │ │ ├── ansi-styles#0.1.2
│ │ │ └── has-color#0.1.7
│ │ ├─┬ glob#3.2.11
│ │ │ ├── inherits#2.0.1
│ │ │ └─┬ minimatch#0.3.0
│ │ │ ├── lru-cache#2.5.0
│ │ │ └── sigmund#1.0.0
│ │ └── lodash#1.3.1
│ └─┬ yeoman-generator#0.16.0
│ ├── async#0.2.10
│ ├─┬ cheerio#0.13.1
│ │ ├─┬ CSSselect#0.4.1
│ │ │ ├── CSSwhat#0.4.7
│ │ │ └─┬ domutils#1.4.3
│ │ │ └── domelementtype#1.1.1
│ │ ├── entities#0.5.0
│ │ ├─┬ htmlparser2#3.4.0
│ │ │ ├── domelementtype#1.1.1
│ │ │ ├── domhandler#2.2.0
│ │ │ ├── domutils#1.3.0
│ │ │ └─┬ readable-stream#1.1.13-1
│ │ │ ├── core-util-is#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.25-1
│ │ └── underscore#1.5.2
│ ├── class-extend#0.1.1
│ ├── dargs#0.1.0
│ ├── debug#0.7.4
│ ├── diff#1.0.8
│ ├─┬ download#0.1.17
│ │ ├─┬ decompress#0.2.3
│ │ │ ├── adm-zip#0.4.4
│ │ │ ├─┬ extname#0.1.2
│ │ │ │ └── ext-list#0.1.0
│ │ │ ├── map-key#0.1.4
│ │ │ ├─┬ stream-combiner#0.0.4
│ │ │ │ └── duplexer#0.1.1
│ │ │ ├─┬ tar#0.1.19
│ │ │ │ ├── block-stream#0.0.7
│ │ │ │ ├─┬ fstream#0.1.25
│ │ │ │ │ └── graceful-fs#2.0.3
│ │ │ │ └── inherits#2.0.1
│ │ │ └─┬ tempfile#0.1.3
│ │ │ └── uuid#1.4.1
│ │ ├── each-async#0.1.3
│ │ ├── get-stdin#0.1.0
│ │ ├── get-urls#0.1.2
│ │ ├─┬ nopt#2.2.1
│ │ │ └── abbrev#1.0.5
│ │ ├─┬ request#2.36.0
│ │ │ ├── aws-sign2#0.5.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.2
│ │ │ │ └─┬ combined-stream#0.0.4
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.0
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.2
│ │ │ │ └── ctype#0.5.2
│ │ │ ├── json-stringify-safe#5.0.0
│ │ │ ├── node-uuid#1.4.1
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ ├─┬ tough-cookie#0.12.1
│ │ │ │ └── punycode#1.2.4
│ │ │ └── tunnel-agent#0.4.0
│ │ └─┬ through2#0.4.2
│ │ ├─┬ readable-stream#1.0.27-1
│ │ │ ├── core-util-is#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.25-1
│ │ └─┬ xtend#2.1.2
│ │ └── object-keys#0.4.0
│ ├─┬ file-utils#0.1.5
│ │ ├── isbinaryfile#0.1.9
│ │ ├── lodash#2.1.0
│ │ └─┬ minimatch#0.2.14
│ │ ├── lru-cache#2.5.0
│ │ └── sigmund#1.0.0
│ ├── findup-sync#0.1.3
│ ├─┬ glob#3.2.11
│ │ ├── inherits#2.0.1
│ │ └─┬ minimatch#0.3.0
│ │ ├── lru-cache#2.5.0
│ │ └── sigmund#1.0.0
│ ├── iconv-lite#0.2.11
│ ├─┬ inquirer#0.4.1
│ │ ├─┬ cli-color#0.2.3
│ │ │ ├── es5-ext#0.9.2
│ │ │ └─┬ memoizee#0.2.6
│ │ │ ├── event-emitter#0.2.2
│ │ │ └── next-tick#0.1.0
│ │ ├── mute-stream#0.0.4
│ │ ├── readline2#0.1.0
│ │ └── through#2.3.4
│ ├── isbinaryfile#2.0.1
│ ├── lodash#2.4.1
│ ├── mime#1.2.11
│ ├── mkdirp#0.3.5
│ ├─┬ request#2.30.0
│ │ ├── aws-sign2#0.5.0
│ │ ├── forever-agent#0.5.2
│ │ ├─┬ form-data#0.1.2
│ │ │ └─┬ combined-stream#0.0.4
│ │ │ └── delayed-stream#0.0.5
│ │ ├─┬ hawk#1.0.0
│ │ │ ├── boom#0.4.2
│ │ │ ├── cryptiles#0.2.2
│ │ │ ├── hoek#0.9.1
│ │ │ └── sntp#0.2.4
│ │ ├─┬ http-signature#0.10.0
│ │ │ ├── asn1#0.1.11
│ │ │ ├── assert-plus#0.1.2
│ │ │ └── ctype#0.5.2
│ │ ├── json-stringify-safe#5.0.0
│ │ ├── node-uuid#1.4.1
│ │ ├── oauth-sign#0.3.0
│ │ ├── qs#0.6.6
│ │ ├─┬ tough-cookie#0.9.15
│ │ │ └── punycode#1.2.4
│ │ └── tunnel-agent#0.3.0
│ ├── rimraf#2.2.8
│ ├── shelljs#0.2.6
│ ├── text-table#0.2.0
│ └── underscore.string#2.3.3
├─┬ generator-angular-fullstack#1.4.2
│ ├─┬ chalk#0.4.0
│ │ ├── ansi-styles#1.0.0
│ │ ├── has-color#0.1.7
│ │ └── strip-ansi#0.1.1
│ ├─┬ wiredep#0.4.2
│ │ ├─┬ chalk#0.1.1
│ │ │ ├── ansi-styles#0.1.2
│ │ │ └── has-color#0.1.7
│ │ └── lodash#1.3.1
│ └─┬ yeoman-generator#0.16.0
│ ├── async#0.2.10
│ ├─┬ cheerio#0.13.1
│ │ ├─┬ CSSselect#0.4.1
│ │ │ ├── CSSwhat#0.4.5
│ │ │ └─┬ domutils#1.4.3
│ │ │ └── domelementtype#1.1.1
│ │ ├── entities#0.5.0
│ │ ├─┬ htmlparser2#3.4.0
│ │ │ ├── domelementtype#1.1.1
│ │ │ ├── domhandler#2.2.0
│ │ │ ├── domutils#1.3.0
│ │ │ └─┬ readable-stream#1.1.13-1
│ │ │ ├── core-util-is#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.25-1
│ │ └── underscore#1.5.2
│ ├── class-extend#0.1.1
│ ├── dargs#0.1.0
│ ├── debug#0.7.4
│ ├── diff#1.0.8
│ ├─┬ download#0.1.16
│ │ ├─┬ decompress#0.2.3
│ │ │ ├── adm-zip#0.4.4
│ │ │ ├─┬ extname#0.1.2
│ │ │ │ └── ext-list#0.1.0
│ │ │ ├─┬ map-key#0.1.1
│ │ │ │ └── mout#0.9.1
│ │ │ ├─┬ stream-combiner#0.0.4
│ │ │ │ └── duplexer#0.1.1
│ │ │ ├─┬ tar#0.1.19
│ │ │ │ ├── block-stream#0.0.7
│ │ │ │ ├─┬ fstream#0.1.25
│ │ │ │ │ └── graceful-fs#2.0.3
│ │ │ │ └── inherits#2.0.1
│ │ │ └─┬ tempfile#0.1.3
│ │ │ └── uuid#1.4.1
│ │ ├── each-async#0.1.2
│ │ ├── get-stdin#0.1.0
│ │ ├── get-urls#0.1.1
│ │ ├─┬ nopt#2.2.0
│ │ │ └── abbrev#1.0.5
│ │ ├─┬ request#2.34.0
│ │ │ ├── aws-sign2#0.5.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.2
│ │ │ │ └─┬ combined-stream#0.0.4
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.0
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.2
│ │ │ │ └── ctype#0.5.2
│ │ │ ├── json-stringify-safe#5.0.0
│ │ │ ├── node-uuid#1.4.1
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ ├─┬ tough-cookie#0.12.1
│ │ │ │ └── punycode#1.2.4
│ │ │ └── tunnel-agent#0.3.0
│ │ └─┬ through2#0.4.1
│ │ ├─┬ readable-stream#1.0.27-1
│ │ │ ├── core-util-is#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.25-1
│ │ └─┬ xtend#2.1.2
│ │ └── object-keys#0.4.0
│ ├─┬ file-utils#0.1.5
│ │ ├── isbinaryfile#0.1.9
│ │ ├── lodash#2.1.0
│ │ └─┬ minimatch#0.2.14
│ │ ├── lru-cache#2.5.0
│ │ └── sigmund#1.0.0
│ ├── findup-sync#0.1.3
│ ├─┬ glob#3.2.9
│ │ ├── inherits#2.0.1
│ │ └─┬ minimatch#0.2.14
│ │ ├── lru-cache#2.5.0
│ │ └── sigmund#1.0.0
│ ├── iconv-lite#0.2.11
│ ├─┬ inquirer#0.4.1
│ │ ├─┬ cli-color#0.2.3
│ │ │ ├── es5-ext#0.9.2
│ │ │ └─┬ memoizee#0.2.6
│ │ │ ├── event-emitter#0.2.2
│ │ │ └── next-tick#0.1.0
│ │ ├── mute-stream#0.0.4
│ │ ├── readline2#0.1.0
│ │ └── through#2.3.4
│ ├── isbinaryfile#2.0.1
│ ├── lodash#2.4.1
│ ├── mime#1.2.11
│ ├── mkdirp#0.3.5
...
Can't actually post it all - this question has gotten very long, haha.
So I guess I could go through and make sure all of them are the same...but does anyone know which ones would be most important for the problem I am having?
Jeepers, that would be annoying!

I have been working on getting my site to work on openshift for a few days now. I spent the last day or two making sure that all of the npm package versions that I use on my computer are the same as the versions that are used on openshift. After I synced up all the versions, it was a lot of work to re-factor my code, but I eventually got it working.
The major error I had to figure out was that when I was trying to do a PUT request, even thought I wasn't changing the _id field - it would give me this error:
MongoError: Mod on _id not allowed
I eventually realized that I needed to create an object with all the same info, just without the _id field to get the update to work.
Other than that, it just took a lot of tinkering to get it right - here is the result of my labor - http://hackabox-eamonbenproject.rhcloud.com/ - the problem I have been having pertains to the forum I was making, so check that out - it is fully functional.