Lowercasing ambidex package name confuses Webpack

[broberson]

Hi Brenton,

I'm trying to get this example up and running on a Macbook Pro and it's going very, very badly. :(

By cloning https://github.com/appsforartists/ambidex-example--bike-index.git, instead of whats in the README, I got this repo cloned. Ran npm install in the project folder, and tried starting it up. Apparently npm start <param> treats param as a module name, so it tries to find a 'tardis' module in the node_modules folder and errors out because that's not what the code expects to see happen. I'm using Node 0.10.33, maybe that's got something to do with it?

node init.js tardis seems to load the app while still passing that 'tardis' parameter along. At that point, WebPack complains that it can't resolve react-hot-loader. Using npm to install that, Webpack then complains it can't find jsx-loader. Installing that with npm gets this to a runnable state, but there's still a bunch of warnings from webpack, this time about multiple modules with the same name - all in react-hot-loader and jsx-loader. Obviously I'm crawling under this hurdle instead of jumping it the right way. No idea what I'm supposed to be doing.

http://tardis.local:8080/ being accessible now, I try poking at it. Clicking a bike in the leftmost iframe loads a new page in that iframe... with a new request/response cycle... kind of like any web page from 1996 would... and the console log is full of "Cannot read property 'NODE_ENV' of undefined". Nothing else on the page seems to do anything. So pretty much there's no javascript running on the page at this point, probably because of the NODE_ENV thing.

Basically this is badly broken and isn't working at all for me, and gosh I really want it to. When you get a chance, can you try this repo out and see what's going on? I'm suspecting that Ambidex has grown and this example is just lagging behind, but if I understood Ambidex well enough to fix it, I wouldn't need an example app ;)

Thanks awfully much.

[appsforartists]

Sorry for that @broberson. I actually just put this repo together for my talk this month, so they shouldn't be too out of sync.

I'm using npm 2. It's what allows you to pass params in npm start It's just an alias for:

> node --harmony ./init.js tardis

This has been tested again node v0.11.13 and npm v2.2.0. I'll add a note about that in the docs, but try that line above and see if that helps.

Also, try running npm list and posting that here. I wonder if for some reason your package install failed.

Finally, I just accepted a PR upgrading the Bike Index API to v2, so try git pull origin master to make sure you have the latest version of this repo.

[broberson]

EDIT: I'm also running this in Node 0.11.13 now.

Using npm 2 seems to help a bit, because --harmony, but it still gives all kinds of errors related to being unable to find react-hot-loader.

package.json is trying to find a package named Ambidex in npm, and there isn't one. ambidex (lower case) is found. If I fix that in package.json and install, it'll run with npm start tardis.

I still get all kinds of errors related to react-hot-loader not being found, and the client-side errors resulting from that prevent the app from working in the browser.

Here's the output from npm list (after fixing the case of Ambidex in package.json) if it's helpful:

ambidex-example--bike-index@0.0.0 /Users/brandon/Projects/brandon/ambidex-example--bike-index
├─┬ ambidex@0.1.0
│ ├─┬ autoprefixer-loader@1.0.0
│ │ ├─┬ autoprefixer-core@3.1.2
│ │ │ ├── caniuse-db@1.0.30000060
│ │ │ └─┬ postcss@2.2.6
│ │ │   ├── js-base64@2.1.7
│ │ │   └─┬ source-map@0.1.43
│ │ │     └── amdefine@0.1.0
│ │ └─┬ loader-utils@0.2.6
│ │   ├── big.js@2.5.1
│ │   └── json5@0.1.0
│ ├─┬ css-loader@0.7.1
│ │ ├── csso@1.3.11
│ │ ├─┬ loader-utils@0.2.6
│ │ │ ├── big.js@2.5.1
│ │ │ └── json5@0.1.0
│ │ └─┬ source-map@0.1.43
│ │   └── amdefine@0.1.0
│ ├─┬ jsx-loader@0.12.2
│ │ ├─┬ loader-utils@0.2.6
│ │ │ ├── big.js@2.5.1
│ │ │ └── json5@0.1.0
│ │ └─┬ react-tools@0.12.2
│ │   ├─┬ commoner@0.10.1
│ │   │ ├── commander@2.5.1
│ │   │ ├─┬ glob@4.2.2
│ │   │ │ ├─┬ inflight@1.0.4
│ │   │ │ │ └── wrappy@1.0.1
│ │   │ │ ├── inherits@2.0.1
│ │   │ │ ├─┬ minimatch@1.0.0
│ │   │ │ │ ├── lru-cache@2.5.0
│ │   │ │ │ └── sigmund@1.0.0
│ │   │ │ └─┬ once@1.3.1
│ │   │ │   └── wrappy@1.0.1
│ │   │ ├── graceful-fs@3.0.5
│ │   │ ├── iconv-lite@0.4.6
│ │   │ ├── install@0.1.8
│ │   │ ├─┬ mkdirp@0.5.0
│ │   │ │ └── minimist@0.0.8
│ │   │ ├── private@0.1.6
│ │   │ ├── q@1.1.2
│ │   │ └─┬ recast@0.9.15
│ │   │   ├── ast-types@0.6.10
│ │   │   ├── esprima-fb@10001.1.0-dev-harmony-fb
│ │   │   └─┬ source-map@0.1.43
│ │   │     └── amdefine@0.1.0
│ │   └─┬ jstransform@8.2.0
│ │     ├── base62@0.1.1
│ │     ├── esprima-fb@8001.1001.0-dev-harmony-fb
│ │     └─┬ source-map@0.1.31
│ │       └── amdefine@0.1.0
│ ├─┬ prfun@1.0.0
│ │ └── es6-shim@0.10.1
│ ├─┬ react-hot-loader@1.0.6
│ │ ├── react-hot-api@0.2.2
│ │ └─┬ source-map@0.1.40
│ │   └── amdefine@0.1.0
│ ├─┬ sass-loader@0.2.0
│ │ ├─┬ loader-utils@0.2.6
│ │ │ ├── big.js@2.5.1
│ │ │ └── json5@0.1.0
│ │ └─┬ node-sass@0.9.6
│ │   ├─┬ chalk@0.5.1
│ │   │ ├── ansi-styles@1.1.0
│ │   │ ├── escape-string-regexp@1.0.2
│ │   │ ├─┬ has-ansi@0.1.0
│ │   │ │ └── ansi-regex@0.2.1
│ │   │ ├─┬ strip-ansi@0.3.0
│ │   │ │ └── ansi-regex@0.2.1
│ │   │ └── supports-color@0.2.0
│ │   ├── get-stdin@3.0.2
│ │   ├─┬ mkdirp@0.5.0
│ │   │ └── minimist@0.0.8
│ │   ├─┬ mocha@1.21.5
│ │   │ ├── commander@2.3.0
│ │   │ ├─┬ debug@2.0.0
│ │   │ │ └── ms@0.6.2
│ │   │ ├── diff@1.0.8
│ │   │ ├── escape-string-regexp@1.0.2
│ │   │ ├─┬ glob@3.2.3
│ │   │ │ ├── graceful-fs@2.0.3
│ │   │ │ ├── inherits@2.0.1
│ │   │ │ └─┬ minimatch@0.2.14
│ │   │ │   ├── lru-cache@2.5.0
│ │   │ │   └── sigmund@1.0.0
│ │   │ ├── growl@1.8.1
│ │   │ └─┬ jade@0.26.3
│ │   │   ├── commander@0.6.1
│ │   │   └── mkdirp@0.3.0
│ │   ├── nan@1.3.0
│ │   ├── node-sass-middleware@0.3.1
│ │   ├── node-watch@0.3.4
│ │   ├── object-assign@1.0.0
│ │   ├── shelljs@0.3.0
│ │   ├─┬ sinon@1.10.3
│ │   │ ├─┬ formatio@1.0.2
│ │   │ │ └── samsam@1.1.2
│ │   │ └─┬ util@0.10.3
│ │   │   └── inherits@2.0.1
│ │   └── yargs@1.3.3
│ ├── style-loader@0.7.0
│ ├─┬ webpack@1.5.3
│ │ ├── async@0.9.0
│ │ ├── clone@0.1.19
│ │ ├─┬ enhanced-resolve@0.8.4
│ │ │ └── graceful-fs@3.0.5
│ │ ├── esprima@1.2.3
│ │ ├── memory-fs@0.2.0
│ │ ├─┬ mkdirp@0.5.0
│ │ │ └── minimist@0.0.8
│ │ ├─┬ node-libs-browser@0.4.1
│ │ │ ├── assert@1.3.0
│ │ │ ├─┬ browserify-zlib@0.1.4
│ │ │ │ └── pako@0.2.5
│ │ │ ├─┬ buffer@2.8.2
│ │ │ │ ├── base64-js@0.0.7
│ │ │ │ ├── ieee754@1.1.4
│ │ │ │ └── is-array@1.0.1
│ │ │ ├─┬ console-browserify@1.1.0
│ │ │ │ └── date-now@0.1.4
│ │ │ ├── constants-browserify@0.0.1
│ │ │ ├─┬ crypto-browserify@3.3.0
│ │ │ │ ├─┬ browserify-aes@0.4.0
│ │ │ │ │ └── inherits@2.0.1
│ │ │ │ ├── pbkdf2-compat@2.0.1
│ │ │ │ ├── ripemd160@0.2.0
│ │ │ │ └── sha.js@2.2.6
│ │ │ ├── domain-browser@1.1.3
│ │ │ ├── events@1.0.2
│ │ │ ├─┬ http-browserify@1.7.0
│ │ │ │ ├── Base64@0.2.1
│ │ │ │ └── inherits@2.0.1
│ │ │ ├── https-browserify@0.0.0
│ │ │ ├── os-browserify@0.1.2
│ │ │ ├── path-browserify@0.0.0
│ │ │ ├── process@0.8.0
│ │ │ ├── punycode@1.3.2
│ │ │ ├── querystring-es3@0.2.1
│ │ │ ├─┬ readable-stream@1.1.13
│ │ │ │ ├── core-util-is@1.0.1
│ │ │ │ ├── inherits@2.0.1
│ │ │ │ └── isarray@0.0.1
│ │ │ ├─┬ stream-browserify@1.0.0
│ │ │ │ └── inherits@2.0.1
│ │ │ ├── string_decoder@0.10.31
│ │ │ ├─┬ timers-browserify@1.2.0
│ │ │ │ └── process@0.10.0
│ │ │ ├── tty-browserify@0.0.0
│ │ │ ├── url@0.10.2
│ │ │ ├─┬ util@0.10.3
│ │ │ │ └── inherits@2.0.1
│ │ │ └─┬ vm-browserify@0.0.4
│ │ │   └── indexof@0.0.1
│ │ ├─┬ optimist@0.6.1
│ │ │ ├── minimist@0.0.10
│ │ │ └── wordwrap@0.0.2
│ │ ├── tapable@0.1.8
│ │ ├─┬ uglify-js@2.4.16
│ │ │ ├── async@0.2.10
│ │ │ ├─┬ optimist@0.3.7
│ │ │ │ └── wordwrap@0.0.2
│ │ │ ├─┬ source-map@0.1.34
│ │ │ │ └── amdefine@0.1.0
│ │ │ └── uglify-to-browserify@1.0.2
│ │ ├─┬ watchpack@0.2.3
│ │ │ ├─┬ chokidar@1.0.0-rc3
│ │ │ │ ├─┬ anymatch@1.1.0
│ │ │ │ │ └─┬ minimatch@1.0.0
│ │ │ │ │   ├── lru-cache@2.5.0
│ │ │ │ │   └── sigmund@1.0.0
│ │ │ │ ├── async-each@0.1.6
│ │ │ │ ├─┬ fsevents@0.3.5
│ │ │ │ │ └── nan@1.5.3
│ │ │ │ ├─┬ glob-parent@1.0.0
│ │ │ │ │ └── is-glob@0.3.0
│ │ │ │ ├─┬ is-binary-path@1.0.0
│ │ │ │ │ └── binary-extensions@1.0.1
│ │ │ │ └─┬ readdirp@1.3.0
│ │ │ │   ├── graceful-fs@2.0.3
│ │ │ │   ├─┬ minimatch@0.2.14
│ │ │ │   │ ├── lru-cache@2.5.0
│ │ │ │   │ └── sigmund@1.0.0
│ │ │ │   └─┬ readable-stream@1.0.33
│ │ │ │     ├── core-util-is@1.0.1
│ │ │ │     ├── inherits@2.0.1
│ │ │ │     ├── isarray@0.0.1
│ │ │ │     └── string_decoder@0.10.31
│ │ │ └── graceful-fs@3.0.5
│ │ └─┬ webpack-core@0.4.8
│ │   └─┬ source-map@0.1.43
│ │     └── amdefine@0.1.0
│ └─┬ webpack-dev-server@1.7.0
│   ├── connect-history-api-fallback@0.0.5
│   ├─┬ express@4.11.1
│   │ ├─┬ accepts@1.2.2
│   │ │ ├─┬ mime-types@2.0.8
│   │ │ │ └── mime-db@1.6.0
│   │ │ └── negotiator@0.5.0
│   │ ├── content-disposition@0.5.0
│   │ ├── cookie@0.1.2
│   │ ├── cookie-signature@1.0.5
│   │ ├─┬ debug@2.1.1
│   │ │ └── ms@0.6.2
│   │ ├── depd@1.0.0
│   │ ├── escape-html@1.0.1
│   │ ├─┬ etag@1.5.1
│   │ │ └── crc@3.2.1
│   │ ├── finalhandler@0.3.3
│   │ ├── fresh@0.2.4
│   │ ├── media-typer@0.3.0
│   │ ├── merge-descriptors@0.0.2
│   │ ├── methods@1.1.1
│   │ ├─┬ on-finished@2.2.0
│   │ │ └── ee-first@1.1.0
│   │ ├── parseurl@1.3.0
│   │ ├── path-to-regexp@0.1.3
│   │ ├─┬ proxy-addr@1.0.5
│   │ │ ├── forwarded@0.1.0
│   │ │ └── ipaddr.js@0.1.6
│   │ ├── qs@2.3.3
│   │ ├── range-parser@1.0.2
│   │ ├─┬ send@0.11.1
│   │ │ ├── destroy@1.0.3
│   │ │ ├── mime@1.2.11
│   │ │ └── ms@0.7.0
│   │ ├── serve-static@1.8.1
│   │ ├─┬ type-is@1.5.6
│   │ │ └─┬ mime-types@2.0.8
│   │ │   └── mime-db@1.6.0
│   │ ├── utils-merge@1.0.0
│   │ └── vary@1.0.0
│   ├─┬ http-proxy@1.8.1
│   │ ├── eventemitter3@0.1.6
│   │ └── requires-port@0.0.0
│   ├─┬ optimist@0.6.1
│   │ ├── minimist@0.0.10
│   │ └── wordwrap@0.0.2
│   ├─┬ serve-index@1.6.0
│   │ ├─┬ accepts@1.2.2
│   │ │ └── negotiator@0.5.0
│   │ ├── batch@0.5.2
│   │ ├─┬ debug@2.1.1
│   │ │ └── ms@0.6.2
│   │ ├─┬ http-errors@1.2.8
│   │ │ ├── inherits@2.0.1
│   │ │ └── statuses@1.2.0
│   │ ├─┬ mime-types@2.0.8
│   │ │ └── mime-db@1.6.0
│   │ └── parseurl@1.3.0
│   ├─┬ socket.io@0.9.17
│   │ ├── base64id@0.1.0
│   │ ├── policyfile@0.0.4
│   │ ├── redis@0.7.3
│   │ └─┬ socket.io-client@0.9.16
│   │   ├─┬ active-x-obfuscator@0.0.1
│   │   │ └── zeparser@0.0.5
│   │   ├── uglify-js@1.2.5
│   │   ├─┬ ws@0.4.32
│   │   │ ├── commander@2.1.0
│   │   │ ├── nan@1.0.0
│   │   │ ├── options@0.0.6
│   │   │ └── tinycolor@0.0.1
│   │   └── xmlhttprequest@1.4.2
│   ├── stream-cache@0.0.2
│   └─┬ webpack-dev-middleware@1.0.11
│     ├─┬ enhanced-resolve@0.7.6
│     │ ├── graceful-fs@2.0.3
│     │ └── tapable@0.1.8
│     ├── memory-fs@0.1.1
│     └── mime@1.2.11
├── isomorphic-reflux@0.2.1
├── lazy.js@0.4.0
├─┬ mach@1.1.0
│ ├── bodec@1.0.0 (git://github.com/mjackson/bodec#7d89a0d003a4b0faa8ca7f271c152d5bc856e847)
│ ├─┬ bufferedstream@3.1.0
│ │ ├── bodec@1.0.0 (git://github.com/mjackson/bodec#7d89a0d003a4b0faa8ca7f271c152d5bc856e847)
│ │ └── events@1.0.2
│ ├── describe-property@1.1.0
│ ├── object-assign@2.0.0
│ ├── qs@2.3.3
│ ├── redis@0.11.0
│ ├── strftime@0.8.2
│ └── when@3.7.2
├── make-node-env-global@1.0.0
├─┬ node-jsx@0.12.4
│ └─┬ react-tools@0.12.2
│   ├─┬ commoner@0.10.1
│   │ ├── commander@2.5.1
│   │ ├─┬ glob@4.2.2
│   │ │ ├─┬ inflight@1.0.4
│   │ │ │ └── wrappy@1.0.1
│   │ │ ├── inherits@2.0.1
│   │ │ ├─┬ minimatch@1.0.0
│   │ │ │ ├── lru-cache@2.5.0
│   │ │ │ └── sigmund@1.0.0
│   │ │ └─┬ once@1.3.1
│   │ │   └── wrappy@1.0.1
│   │ ├── graceful-fs@3.0.5
│   │ ├── iconv-lite@0.4.6
│   │ ├── install@0.1.8
│   │ ├─┬ mkdirp@0.5.0
│   │ │ └── minimist@0.0.8
│   │ ├── private@0.1.6
│   │ ├── q@1.1.2
│   │ └─┬ recast@0.9.15
│   │   ├── ast-types@0.6.10
│   │   ├── esprima-fb@10001.1.0-dev-harmony-fb
│   │   └─┬ source-map@0.1.43
│   │     └── amdefine@0.1.0
│   └─┬ jstransform@8.2.0
│     ├── base62@0.1.1
│     ├── esprima-fb@8001.1001.0-dev-harmony-fb
│     └─┬ source-map@0.1.31
│       └── amdefine@0.1.0
├─┬ react@0.12.2
│ └─┬ envify@3.2.0
│   ├─┬ jstransform@7.0.0
│   │ ├── base62@0.1.1
│   │ ├── esprima-fb@7001.1.0-dev-harmony-fb
│   │ └─┬ source-map@0.1.31
│   │   └── amdefine@0.1.0
│   └── through@2.3.6
├─┬ react-router@0.11.6
│ ├── qs@2.2.2
│ └── when@3.4.6
├── react-tap-event-plugin@0.1.3
├─┬ reflux@0.2.4
│ ├── eventemitter3@0.1.6
│ └── native-promise-only@0.7.6-a
├── respimage@1.1.3
└─┬ to-camel-case@0.2.1
  └─┬ to-space-case@0.1.2
    └── to-no-case@0.1.1

Copying the deps entries for react-hot-loader and jsx-loader from ambidex's package.json (in order to ensure the same versions are installed) to the main package.json gets the page up and running where things like side menus work, but since there are multiple copies of react-hot-loader involved, actually updating code doesn't work. Rather than injecting the new code, a runtime error is thrown.

I'm still puzzled. Does this work on your computer Brenton?

-- Brandon

[appsforartists]

I think I've narrowed the problem. The version I demoed on stage was before npm forced me to lowercase the name. In the version that's under version control, I've lowercased all the require("Ambidex") statements. Something about that lowercasing is making webpack upset, but I haven't figured out what yet. I pinged @sokra on gitter for help.

Sorry your onboarding experience hasn't been smoother. :disappointed:

[broberson]

Thanks for looking into it; very thoughtful of you. As for onboarding experiences, well, you were quite clear in your talk about this being experimental software :)

I'll follow along in https://gitter.im/webpack/webpack - thanks again for having a look at this.

[appsforartists]

:smiley:

[appsforartists]

My pleasure, looking into it. Of course, the main repo will always be better supported than the demo (because we have real software powered by Ambidex), but the whole point of sharing was to help other people. It doesn't help anybody if the sample doesn't reliably run.

Have you worked with React and ReactRouter before? If you tell me a bit about your app as it is now, maybe I can help you try Ambidex without bothering with the sample.

[appsforartists]

I took a look at it with fresh eyes and found the lingering reference to Ambidex with a capital A. If you npm install ambidex@0.1.1, it should be fixed.

Sorry this didn't work from the beginning, @broberson and @fingermark!

[broberson]

Nope, nothing much yet as far as a project goes - this is my first serious attempt at using React. I figured Ambidex would give me a huge jumpstart on getting a project going that I can actually work with, rather than fighting with it.

Eventually, I'd like to be doing hybrid mobile apps with it; I've gotten kind of tired of the way Angularjs works. Figured I'd put together a personal website with React and see if it brings back some of the happy.

Thanks for the npm update - I'll have to dig into Ambidex and React this week :)