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
Related
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!
I am trying to follow this Spring tutorial on how to use websockets. I am using webpack to bundle my code and babel to convert it from ES6. I am trying to pull in sockjs with a normal import statement.
import SockJS from 'sockjs'
But when webpack runs, I get missing module errors,
ERROR in ./~/stompjs/lib/stomp-node.js
Module not found: Error: Cannot resolve module 'net' in /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/stompjs/lib
# ./~/stompjs/lib/stomp-node.js 14:8-22
ERROR in ./~/websocket/package.json
Module parse failed: /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/websocket/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "_args": [
| [
| "websocket#latest",
# ./~/websocket/lib/version.js 1:17-43
mainly because it is expecting to be run on Node.
I have 2 questions.
First, how do I get stompjs into my browser side code using an import/require statement?
Second, how come in the tutorial, they can drop stompjs in the HEAD and it doesn't blow up in the browser, but it does when I run the "same" code through webpack?
It seems that stompjs library referenced in Spring's documentation is no longer developed, but there is fork that is maintained and with instructions on how to add it to your project available here: https://github.com/stomp-js/stomp-websocket
Here are the steps that I used to resolve this issue and to get things working in a React app with websockets on Spring backend:
# Add sockjs and stompjs dependencies
npm install sockjs-client --save
npm install #stomp/stompjs --save
Then import it into your app:
import SockJS from "sockjs-client"
import Stomp from "#stomp/stompjs"
You should now be able to use the frontend code from the Spring's documentation successfully.
installing 'net' dependency solved my issue
npm i sockjs-client --save
npm i stompjs --save
npm i net
and import like this
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
You have to import "sockjs-client": "^1.0.3" in your package.json.
Then you can import it with
import SockJS from 'sockjs-client'
My webpack.config.js contains the library 'sockjs-client'.
Additionally I added the following conf, in order to ignore missing net module.
node: {
net: 'empty',
tls: 'empty',
dns: 'empty'
}
Source: https://github.com/hapijs/joi/issues/665#issuecomment-113713020
In ionic 6 Angular 12
Install
npm i --save sockjs-client stompjs net
Then
npm i --save-dev #types/sockjs-client #types.stompjs
Import using
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
To solve the issue with 'global' I had to add the following to index.html
<script type="application/javascript"> var global = window; </script>
To use stompjs in browser, just open file your_path/node_modules/stompjs/index.js, comment it like this:
var Stomp = require('./lib/stomp.js');
// var StompNode = require('./lib/stomp-node.js');
module.exports = Stomp.Stomp;
// module.exports.overTCP = StompNode.overTCP;
// module.exports.overWS = StompNode.overWS;
My Ember app injects an "i18n" object into the container via an initializer, which is later looked up with "this.container.lookup('i18n:main')" in a controller 'preferredLanguage' computed property.
A mocha unit test which tests the controller 'preferredLanguage' property, fails due to "i18n is not defined". How can I set up the mocha tests to run Ember application initializers so injected objects are defined when looked up from the container during unit testing?
I've found that the main issue is (as you mentioned) is that the start-app.js file doesn't run when mocha is installed. I battled this for a while as well but have finally refined the process to get Ember and Mocha to play nicely. First you have to get ember-cli-mocha and ember-mocha setup correctly. Then you can explicitly import and invoke the startApp function in your tests/test-helper.js file to have Ember run and inject test helpers like it normally does with qunit. Here is what has worked for me with ember-cli 1.13.1.
bower install ember-mocha
bower install ember-test-helpers
npm install ember-cli-mocha
ember install ember-cli-mocha (say Y to overwrite test-helper.js)
Then in tests/test-helper.js
// tests/test-helper.js
import resolver from './helpers/resolver';
import { setResolver } from 'ember-mocha';
// startApp doesn't run with mocha... so we run it explicitly
import startApp from "./helpers/start-app";
startApp();
setResolver(resolver);
After that you can create generate a route or controller and ember-cli-mocha will create test and you should have access to helpers like visit() and currentURL(); Though I found you need to actually setup the route and controller for those to work correctly.
it("should have use of ember's test helpers", function() {
visit("/mocha-test");
andThen(function() {
var url = currentURL();
expect(url).to.equal("/mocha-test");
});
});
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.
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