Ember : Could not find module `#ember-intl/intl-relativeformat` imported from `ember-intl/services/intl` - ember.js

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!

Related

Ember addon: Could not find module from within component

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

Could not import environment config in an ember controller

Here are the ember libraries that I used:
ember-cli : 0.1.7
Ember : 1.8.1
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0
My config/environment.js file contains some api keys. According to the link (http://www.ember-cli.com/#Environments) I can access the variables from environment file with the paths ../config/environment or your-application-name/config/environment.
Now, I need a url from the environment file in a controller and I have the following code:
import Ember from "ember";
import BaseController from 'appkit/controllers/base-controller';
import config from '../config/environment';
var NavigationController = BaseController.extend({
homeUrl: config.URL
});
export default NavigationController;
When checking the browser I have the following error:
Error: Could not find module appkit/controllers/config/environment
I changed the import path from the controller with 'appkit/config/environment' (according with the above link) and I get the same error message. The problem is that the config/environment.js file is not in the appkit/controllers folder but on the same level with the appkit folder.
My question is: what is the path for importing the config/environment from a controller?
According to the guide: https://guides.emberjs.com/v2.0.0/configuring-ember/configuring-your-app/
You can access these environment variables in your application code by importing from your-application-name/config/environment.
The key is that the error notes that it is looking for the config directory in appkit/controllers/ which is one directory too deep. Due to how your NavigationController is presumably nested, you'll need an import statement like this:
import config from '../../config/environment';
Since I cannot find a solution to use variables from the configuration file, I moved the configuration variables in a json object in the index.html file that is generated from my .NET application and I solved the problem.

ember-cli including different script tags in development vs production

when using ember-cli I would like to be able to include an external js library which requires an API key and I would like to use a different API key in development vs production.
Essentially I would like to add the following script tag to app/index.html
<script type="text/javascript" src="http://something.com?key=API_KEY"></script>
but I would like API_KEY to be different when I'm running in development as opposed to production.
Thanks for the help!
Have a look at the ember-inject-script addon which makes it easy to include 3rd party scripts in your ember-cli app. To use it, npm-install the addon then use an initializer to load the script. Then set different values for API_KEY in your config/environment.js
npm install --save-dev ember-inject-script
ember generate initializer something-dot-com
Then edit the initializer as follows
import injectScript from 'ember-inject-script';
import config from '../config/environment';
export default {
name: 'something-dot-com',
initialize: function() {
var url = "//something.com?key=" + config.SOMETHING_API_KEY;
injectScript(url);
};
}
And in config/environment.js
ENV.SOMETHING_API_KEY = 'YOUR_DEV_API_KEY';
if (ENV.environment === "production") {
ENV.SOMETHING_API_KEY = 'YOUR_PROD_API_KEY';
}

Ember CLI - Firebase is not defined after installing with npm

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

Adding firebase & emberfire dependencies to an ember.js app (ember-cli)

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