Unable to use ember AddOns

Questions General
1

I’m new to Ember, but not web development. Currently just making a small info system that will track trading cards. When trying to use the ember addon ember-file-upload:

ember install ember-file-upload

it will fail the first time saying it’s unable to find the ember-file-upload library, and succeed on the 2nd. Here are my test route and template files.

***templates/import-checklist.hbs***

    {{page-title "ImportChecklist"}}

	<h1>Import New Checklist</h1>

	<div id="import-checklist" >
		<form id="import-checklist-form">
			<label for="year">Year</label>
			<Input
				id="year"
				name="year"
				@type="text"
				minlength="4"
				maxlength="4"
			/>
			
			<label for="company">Company</label>
			<Input
				id="company"
				name="company"
				@type="text"
				maxlength="20"
			/>
			
			<label for="deck">Deck</label>
			<Input
				id="deck"
				name="deck"
				@type="text"
				maxlength="30"
			/>
			
			<label for="newChecklistFile">File</label>
			<Input
				id="newChecklistFile"
				name="newChecklistFile"
				@type="file"
			/>
			
			{{#let (file-queue name="newChecklistFile") as |queue|}}
				Files in queue: {{queue.files.length}}
			{{/let}}
		</form>
	</div>

       {{outlet}}

***routes/import-checklist.js***

import Route from '@ember/routing/route';
import { Queue } from 'ember-file-upload';

export default class ImportChecklistRoute extends Route {}


***package.json***

{
  "name": "cam-card-comp",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for cam-card-comp goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
    "lint:fix": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "npm-run-all --print-name \"lint\" \"test:*\"",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@ember/optional-features": "^2.0.0",
    "@ember/test-helpers": "^2.8.1",
    "@glimmer/component": "^1.1.2",
    "@glimmer/tracking": "^1.1.2",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^2.4.3",
    "ember-cli": "~4.8.0",
    "ember-cli-app-version": "^5.0.0",
    "ember-cli-babel": "^7.26.11",
    "ember-cli-dependency-checker": "^3.3.1",
    "ember-cli-htmlbars": "^6.1.1",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-terser": "^4.0.2",
    "ember-data": "^4.7.3",
    "ember-data-table": "^2.1.0",
    "ember-fetch": "^8.1.2",
    "ember-file-upload": "^7.1.0",
    "ember-group-by": "0.0.6",
    "ember-load-initializers": "^2.1.2",
    "ember-page-title": "^7.0.0",
    "ember-qunit": "^6.0.0",
    "ember-resolver": "^8.0.3",
    "ember-source": "~4.8.0",
    "ember-table": "^5.0.0",
    "ember-template-lint": "^4.16.1",
    "ember-welcome-page": "^6.2.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-ember": "^11.1.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-qunit": "^7.3.1",
    "link-component": "^1.0.4",
    "loader.js": "^4.7.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "qunit": "^2.19.2",
    "qunit-dom": "^2.0.0",
    "webpack": "^5.75.0"
  },
  "engines": {
    "node": "14.* || 16.* || >= 18"
  },
  "ember": {
    "edition": "octane"
  },
  "dependencies": {
    "ember-auto-import": "^2.4.3",
    "n": "^9.0.1",
    "stable": "^0.1.8"
  }
}

I’ve tried this as well with ember-table and I ran into a similar issue. I’m sure it’s me that’s doing something wrong, but any advise would be appreciated!

2

I’ve seen this as well, it was a bug in ember-cli which was just recently fixed. I believe if you update your globally install ember-cli version to 4.8 that should fix it.

1 Like
3

Thanks for the help! After updating the ember-cli version to 4.8 and reinstalling my node_modules it worked.