Unable to Load Ember Addons?

Ember CLI
1

I’m trying to use an addon called ember-keyboard-shortcuts.

I’ve followed instructions for installing, which doesn’t seem to be any different than any other addon.

The addon is installed properly with the command ‘ember install ember-keyboard-shortcuts’.

I import the addon as normal to a component that needs the mixin:

import KeyboardShortcuts from 'ember-keyboard-shortcuts/mixins/component';

It also requires mousetrap, which I’ve also tried to install with npm --save-dev. Installs mousetrap properly.

However, when I load the component that uses the addon, i get this error message:

Uncaught Error: Could not find module `ember-keyboard-shortcuts/mixins/component` imported from `admin/components/edit-in-place-input`

I’ve had this problem with other addons as well. At first, I thought maybe it was the addon I was using, which lead me to checking out ember-keyboard-shortcuts. But the problem is consistent across these addons. They have been updated as far back as a month ago.

ember --version
version: 1.13.1
node: 0.12.6
npm: 2.12.1

I can’t seem to find any information online. I’m following instructions as they are written and these addons seem to be made the proper way. What am I missing here?

2

Hard to tell without seeing the app that is trying to consume this. Can you validate that ember-keyboard-shortcuts is inside of your apps package.json? If so, can you post a little application with this issue reproduced?

3

It is, in fact, in my package.json:

via npm:

❯❯❯ npm list ember-keyboard-shortcuts                                             ✭ ✱ ◼
admin@0.0.0 /Users/••••/••••/••••/ember/admin
└── ember-keyboard-shortcuts@0.3.0

package.json

{
  "name": "admin",
  "version": "0.0.0",
  "description": "Small description for admin goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "ember-cli": "1.13.1",
    "ember-cli-app-version": "0.4.0",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-deploy": "0.4.3",
    "ember-cli-emblem": "0.3.0",
    "ember-cli-htmlbars": "0.7.9",
    "ember-cli-htmlbars-inline-precompile": "^0.1.1",
    "ember-cli-ic-ajax": "0.2.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.15",
    "ember-cli-rails-addon": "0.0.11",
    "ember-cli-release": "0.2.3",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.13.5",
    "ember-disable-proxy-controllers": "^1.0.0",
    "ember-export-application-global": "^1.0.2",
    "ember-keyboard-shortcuts": "0.3.0"
  }
}

Nothing really seems out of place. I am just trying to use an addon. This problem is with more than just this addon.

I assume the path to an addon when importing is correct?

It’s dependency for mousetrap was also installed using npm and found in that package.json as well.

I’ve double checked all of this. I am confounded at this point.

4

Ok, totally strange. I tried re-installing again and it works. Only difference this time is I renamed the import to KeyboardShortcutsMixin.

Does the naming convention matter? This is so friggen weird. I actually installed/reinstalled about 4 times and it only worked when being more specific on the import name (other than the suggestion in the addon’s docs).