After taking the following steps in the command line to install Ember CLI, Firebase, and EmberFire with node, I am getting an error saying that Firebase is not defined in app/adapter/application.js
npm install -g ember-cli
npm install -g bower
npm install -g phantomjs
ember new my-new-app
cd my-new-app
ember server
At this point I can see my ember app with the default output of “Welcome to Ember.js” at localhost:4200
npm install firebase
npm install —save ember-fire
ember generate adapter application
Then in app/adapter/application.js, removed “export default DS.RESTAdapter.extend({});” and pasted "export default DS.FirebaseAdapter.extend({
firebase: new Firebase('https://.firebaseio.com')
});” with my own firebase URL
ember server
Then I get an error in terminal:
Serving on http://0.0.0.0:4200
lionworxs/adapters/application.js: line 4, col 17, 'Firebase' is not defined.
1 error
===== 1 JSHint Error
Path or pattern "vendor/firebase/firebase.js" did not match any files
Error: Path or pattern "vendor/firebase/firebase.js" did not match any files
I have tried creating the firebase.js file in the directory specified above, but it leads to an entirely new string of errors so I thought that I missed a step in my installation. Do I need to manually include Firebase somewhere in my application even after "installing" it via command line?
Bower install Firebase and EmberFire.
bower install firebase --save
bower install emberfire --save
Be sure you've required the necessary script calls for Firebase and EmberFire in your index.html file:
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.19/firebase.js"></script>
<!-- EmberFire -->
<script src="https://cdn.firebase.com/libs/emberfire/1.1.3/emberfire.min.js"></script>
In your adapter, try using window.Firebase:
import DS from 'ember-data';
export default DS.FirebaseAdapter.extend({
firebase: new window.Firebase('https://your-firebase-data-url.firebaseio.com/web/data')
});
Your question is similar to this one - Adding firebase & emberfire dependencies to an ember.js app (ember-cli) ...
And you might find the final comment there helpful - https://stackoverflow.com/a/24541248/409156
I had the same issue as user2817513. Copying this response from another thread because it was the only thing that worked for me:
Posted by tikotzky:
If anyone is still looking for this, I just created an ember-cli addon that include both firebase and emberfire into the app.
All you need to do is run npm install --save-dev ember-cli-emberfire from within your app and you should be good to go.
You can see the code here https://github.com/tikotzky/ember-cli-emberfire
Related
In a new ember 3.28 addon project:
npm install chart.js --save
ember g component-class chart
Insert <Chart /> into application.hbs on dummy app and in addons/component/chart.js, add this
import Chart from 'chart.js/auto';
Running app gives:
Uncaught Error: Could not find module `chart.js/auto` imported from `chartjs-test/components/chart`
Yet if the import Chart goes into the application.js route in the dummy app instead, it works. How can you import this module correctly from within an addon component?
Update: Same issue with other installed packages eg. import chroma from "chroma";
Turns out you need to add the same import statement into app/component/chart.js:
UPDATE:
The above isn't the proper way and causes issues when using the addon elsewhere. The real solution is to move ember-auto-import to dependencies from devDependencies in package.json of the addon
Im trying to create an Ember Addon that uses the blueprint afterInstall hook.
I have read https://cli.emberjs.com/release/writing-addons/addon-blueprints/
My addon is called hello-world.
I generated my addon blueprint by ember generate blueprint hello-world.
I have now a blueprint/hello-world/index.js file.
'use strict';
module.exports = {
description: 'This is my blueprint',
afterInstall(options) {
console.log('hello');
return this.addPackagesToProject([
{ name: 'lodash' }
]);
}
};
How could I test the the afterInstall hook is called?
My Ember Addon is in development (and has not been published), I have tried using npm link in my Ember Addon directory and npm link hello-world in my Ember app. This creates a symlink in my Ember App node_modules to point to my hello-world Ember Addon but it does not trigger the afterInstall hook.
My Ember App package.json does not get an entry for lodash in dependencies or devDependencies.
Part of my Ember App package.json
"devDependencies": {
...
"hello-world": "*"
...
}
Running npm install --offline does not seem to trigger the blueprint hook.
Ember addons are typically installed with the command ember install addon_name. This function essentially is the composite of:
npm install addon_name
ember generate addon_name
So after you npm link your addon, go into the consuming project and generate your addon's default blueprint with ember generate addon_name
I added the module ember-intl in my app since the ember-i18n is deprecated.
so yarn works well, updates package.json and yarn.lock (i got rid of the package.lock),
but i get this error on the browser's console after a successful ember build:
Error: Could not find module #ember-intl/intl-relativeformat
imported from ember-intl/services/intl
But in my node_modules the folders #ember-intl/intl-relativeformat and ember-intl both exist.
in the yarn.lock i have this line:
"#ember-intl/intl-relativeformat#^2.1.0":
more info:
Ember : 3.5.1
Ember Data : 3.5.0
jQuery : 3.3.1
Ember Remodal : 2.18.0
I solved this problem by adding ember-auto-import to my project. It comes pre-installed in new Ember projects, but needs to be added manually to older ones.
Just run ember install ember-auto-import and that's it.
I just installed it to see if a blank slate would show me that error.
It did not. : /
I just had a few beers... but I just want to make sure you imported the service.
the docs show:
// app/routes/application.js
export default Route.extend({
intl: service(),
beforeModel() {
return this.intl.setLocale(['fr-fr', 'en-us']); /* array optional */
}
});
but like most docs - assume you know the larger ecosystem. It's a tiny possibility that you might not have imported the module above import Service from '#ember/service'; etc.? https://guides.emberjs.com/release/applications/services/
if not that... then track down the mentioned 'ember-intl/services/intl' and see if you can figure out why the '#ember-intl/intl-relativeformat' import isn't jiving. Maybe check the repo and the version - and ask there on GitHub?
Good luck!
How do you need to work in an Ember addon, to include bower packages while installing the addon.
1) I installed the bower package I want to include in my addon with bower instal packagename --save
2) then in my addon, in the root, edited index.js, to look like this:
/* jshint node: true */
'use strict';
module.exports = {
name: 'my-ember-component',
included: function(app) {
this._super.included(app);
if(app.import){
app.import(app.bowerDirectory + '/path-to-package/package.js');
}
}
};
However, when I try to start my application where the addon is installed, I get a
ENOENT: no such file or directory, stat '/my-ember-application/tmp/source_map_concat-input_base_path-bWTPoVC9.tmp/0/bower_components/path-to-package/package.js
I want to avoid having to manually add the bower dependency to every application I install my addon in.
Note: I am using npm link to debug my addon, perhaps this could be a source of the problem?
Normally the addon's bower componenets are added to the consuming project during ember install addon.
But since you're doing local development and using npm link. You need to simulate this. You can do this with:
ember generate your-addon-name
Explanation.
Check out the docs on default blueprints in the ember cli docs.
A blueprint with the same name as the addon (unless explicitly
changed, see above) will be automatically run after install (in
development, it must be manually run after linking). This is where you
can tie your addon’s bower dependencies into the client app so that
they actually get installed.
In short, you need to create a default blueprint for your app and add the bower dependency there.
Create your file:
//blueprints/your-addon-name/index.js
module.exports = {
normalizeEntityName: function() {}, // no-op since we're just adding dependencies
afterInstall: function() {
return this.addBowerPackageToProject('BOWER PACKAGE NAME'); // is a promise
}
};
Then when you run the default blueprint with
ember generate your-addon-name
I'm an emberjs begginer and I have been searching how to add the "firebase" and "emberfire" dependencies to my ember application that I created using ember-cli. I used bower to install these 2 dependencies but I get this error:
Firebase is not defined
ReferenceError: Firebase is not defined
at eval (app/adapters/application.js:6:23)
at requireModule (loader.js:54:29)
at resolveOther (ember-resolver.js:158:20)
at superWrapper (ember.js:1267:16)
at Ember.DefaultResolver.extend.resolve (ember-resolver.js:205:17)
at superWrapper [as resolve] (ember.js:1267:16)
at Object.resolve [as resolver] (ember.js:41149:21)
at Object.Container.resolve (ember.js:10907:29)
at factoryFor (ember.js:11373:31)
at instantiate (ember.js:11434:21)
here's my adapter:
export default DS.FirebaseAdapter.extend({
firebase: new Firebase('https://(myfirebaseurl).firebaseio.com')
});
What should I do? I know I must have missed something, but I have already spent many hours and any answer given would be a great help ! Thanks in advance :)
bower install firebase
Add emberfire/dist/emberfire.min.js to Brocfile.js inside the legacyFilesToAppend array.
Add a line in your bower.json file matching the version that you're using so that on a new checkout everything will continue to work.
People visiting this in the future: this applies to ember-cli 0.0.21 ONLY.
Check out this example app by Stefan Penner https://github.com/stefanpenner/ember-cli-ember-fire/
If anyone is still looking for this, I just created an ember-cli addon that include both firebase and emberfire into the app.
All you need to do is run npm install --save-dev ember-cli-emberfire from within your app and you should be good to go.
You can see the code here https://github.com/tikotzky/ember-cli-emberfire
For those still looking for help with this, I was able to get my app working by starting from scratch in a new branch and following these instructions: https://github.com/stefanpenner/ember-cli/issues/185#issuecomment-39170635