Jello. I build a webapp using Emberjs on the frontend with a Flask REST API, and I am looking to deploy this in an EC2 instance with AWS. I am able to build the frontend to dist, but I am unsure of further action I need to successfully deploy my app. When I run the server and visit the instance public URL, I get a 404.

How should I configure Ember to automatically handle the GET requests and serve HTML the way it does when running ember serve -w locally? Any advice would be much appreciated. Cheers.

3 posts - 3 participants

Read full topic

Howdy,

I wrote a blog post about how to add a custom waiter in a component that uses an async DOM function to be able to test it properly.

Here is the component:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class AvatarComponent extends Component {
  @tracked isShowingInitials = false;

  get initials() {
    const [first, ...rest] = this.args.name.split(/\s+/);
    const last = rest.pop();
    return [first, last].map((name) => name[0]).join('');
  }

  @action
  showInitials() {
    this.isShowingInitials = true;
  }
}

And its template:

<div class="avatar">
  {{#if this.isShowingInitials}}
    <div class="initials">{{this.initials}}</div>
  {{else}}
    <img
      src={{@url}}
      onError={{this.showInitials}}
      alt={{concat @name "'s avatar"}}
    />
  {{/if}}
  <div class="name">{{@name}}</div>
</div>

Here is the test:

module('Integration | Component | avatar', function (hooks) {
  setupRenderingTest(hooks);

  test('It falls back to initials when the image cannot be loaded', async function (assert) {
    await render(
      hbs`<Avatar @name="Marquis de Carabas" @url="/images/non-existent.webp" />`,
    );
    assert.dom('.initials').hasText('MC');
  });
});

If the waiter is not there, Ember doesn’t wait for the onError callback to finish before moving on to the assertion in the test, and thus the test fails. With the waiter properly set up, it works great.

However, I also noticed that if there is no custom waiter, but I add an await settled() after the await render() line in the test, the test seems to pass reliably:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'image-onerror/tests/helpers';
import { render, settled } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | avatar', function (hooks) {
  setupRenderingTest(hooks);

  test('It falls back to initials when the image cannot be loaded', async function (assert) {
    await render(
      hbs`<Avatar @name="Marquis de Carabas" @url="/images/non-existent.webp" />`,
    );
    await settled();
    assert.dom('.initials').hasText('MC');
  });
});

And this is what I’m quite baffled about. Adding the call to settled shouldn’t matter at all, it even prompts a linting error that says that I shouldn’t add a settled when the helper (the render) has it as its return value and yet with this addition the test seems to always pass.

So why does settled work here?

Is it that calling settled takes a minuscule amount of time but enough for the onError callback to run? Is it something else?

Thank you!

3 posts - 3 participants

Read full topic

We’re looking for a TypeScript/Glimmer/Ember developer to join our team; please see the link for more info:

https://ca.indeed.com/cmp/Flightpath-Software-Inc./jobs?jk=c105e2644485f6cd

1 post - 1 participant

Read full topic

i’ve come to expect a certain level of progressive values from this community. I love that emberjs.com has at the very top support for both BLM and the war in Ukraine but it is a glaring omission not to include a recognition of the genocide ocuring in Gaza at the moment. I realize not every cause should get recognition but this is the biggest ting happening in the world right now and I have seen zero support from the top brass of this project. It is unconscionable and needs to be called out. I expect better from this project and from their leaders.

2 posts - 2 participants

Read full topic

What I want is to make a specific request to my backend and get back a list of models but it is not exactly a findAll/query call as i require an id (the url would be in the format v1/personType/{id}) so i need a separate url or adapter method.

So my question is: how would I make an adapter method such that the results are converted from plain json to models. I’ve tried making my own fetch request in an adapter method and then normalizing but normalizing didn’t do what i thought it would and its not being turned into models.

It seems strange to me that only findAll/query and a couple of other built in methods are the only ways that i can get ember to turn the results into models.

Any help is appreciated.

3 posts - 2 participants

Read full topic

I see this reason for “Ember application not detected!”:

“* You are using the file:// protocol (instead of http://)”

Does that apply to localhost:// as well?

1 post - 1 participant

Read full topic

Hi all,

I’m going to research to find the alternative of Alpaca in Ember 5.4 LTS version

• Node v20.x
• Ember 5.4
• jQuery 3.7.1
• Bootstrap 4.6.2
• Alternative of Alpaca

Could you please share your idea about the alternative of Alpaca in Ember latest version?

1 post - 1 participant

Read full topic

Hi, in an Ember 3 app there is:

import DS from 'ember-data';
import { computed } from '@ember/object';
export default DS.RESTAdapter.extend({
  host: computed(function(){
    return 'http://localhost:8000';
  }),
  namespace: 'api'
});

With DS no longer used, how do write the adapter for Ember 5?

I’m guessing there’s something better than the following?

import JSONAPIAdapter from '@ember-data/adapter/json-api';
import { computed } from '@ember/object';
export default JSONAPIAdapter.extend({
  host: computed(function(){
    return 'http://localhost:8000';
  })
});

3 posts - 1 participant

Read full topic

Hello! We have two EmberJS apps that could use a whole lot of upgrades - we’re currently moving from 2.18 up to 3.x and beyond, hopefully going all the way to 4.x or even the latest LTS.

Our entire team is remote, so collaborating remotely should be very easy since it’s what we do every day.

Ideally, we’d have someone who already has experience doing Ember upgrades. And although we have a pretty thorough automated test suite, there are always some functionality that isn’t covered by the automated test suite, so it would be nice to have someone who is willing to do some semi-thorough integration testing before having the code ready for review.

Our team will help you with any questions, both about the functionality and testing. We just need you to bring the Ember upgrade knowledge and skills

Learn more about our company and our product suite here: https://thirdiron.com

Looking forward to hearing from you!

1 post - 1 participant

Read full topic

I’m using Ember 5.4.0 and when I run

ember test --launch chromium-browser

I get

Launcher chromium-browser not found. Not installed?

But I have chromium-browser installed in my machine. which chromium-browser returns

/usr/bin/chromium-browser

and chromium-browser --version returns

Chromium 108.0.5359.40 Ubuntu 22.04

Any help?

2 posts - 1 participant

Read full topic

Why am I encountering the error 'Uncaught Error: Could not find module @ember/application ’ when trying to import it from ‘web-app/app’ in my Ember.js project?

Specs:

npm: 6.14.5
node: v14.4.0
ember-cli: 3.28.6
os: macOS Monterey, version: 12.7.1

package.json

"devDependencies": {
    "@ember/test-helpers": "^2.6.0",
    "@glimmer/component": "^1.0.4",
    "@glimmer/tracking": "^1.0.4",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.12.0",
    "ember-cli": "~3.28.6",
    "ember-cli-app-version": "^5.0.0",
    "ember-cli-babel": "^7.26.10",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^5.7.2",
    "ember-cli-image-cropper": "0.0.14",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-less": "^3.0.1",
    "ember-cli-moment-shim": "^3.6.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "^1.9.0",
    "ember-cli-terser": "^4.0.1",
    "ember-copy": "^2.0.1",
    "ember-data": "~3.28.6",
    "ember-engines": "^0.5.8",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.1.1",
    "ember-link-action": "0.0.37",
    "ember-load-initializers": "^2.1.2",
    "ember-m-css-loader": "^2.0.0",
    "ember-m-js-loader": "^2.0.0",
    "ember-moment": "^7.6.0",
    "ember-page-title": "^6.2.2",
    "ember-qunit": "^5.1.5",
    "ember-resolver": "^8.0.3",
    "ember-script-loader": "^0.2.0",
    "ember-sortable": "^1.9.4",
    "ember-source": "~3.28.8",
    "ember-spectrum-color-picker": "^0.8.1",
    "ember-spreadsheet-export": "^0.6.0",
    "ember-template-lint": "^3.15.0",
    "ember-wormhole": "^0.5.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-ember": "^10.5.8",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-qunit": "^6.2.0",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "loading-svg": "^1.0.0",
    "moment": "2.29.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "qunit": "^2.17.2",
    "qunit-dom": "^1.6.0"
  },
"dependencies": {
    "@ember/jquery": "^2.0.0",
    "@ember/optional-features": "^2.0.0",
    "dompurify": "^1.0.2",
    "ember-cli-node-modules-to-vendor": "^0.2.0",
    "ember-cli-preprocess-registry": "3.1.2",
    "ember-cli-terser": "^4.0.2",
    "ember-data-change-tracker": "^0.10.1",
    "ember-vendor-split": "^1.2.0",
    "html2canvas": "^1.4.1",
    "intl-tel-input": "18.2.1",
    "jquery": "^3.1.1",
    "latest-version": "^3.1.0",
    "lodash": "^4.16.4",
    "moment-timezone": "^0.5.14"
  }

bower.json

{
  "name": "web-app",
  "devDependencies": {
    "jquery-ui": "^1.12.1"
  }
}

Note: After downgrading the ember-source version to 3.24.7, the issue was resolved and everything has been working fine. However, it is important to note that using higher versions may result in the same issue occurring again.

I need a solution for this as soon as possible. Please help.

Note: After downgrading the ember-source version to 3.24.7, the issue was resolved and everything has been working fine. However, it is important to note that using higher versions may result in the same issue occurring again.

I need a solution for this as soon as possible. Please help.

2 posts - 2 participants

Read full topic

In a development mode ember doesn’t group requests in one request with ids. I use RESTAdapter and define coalesceFindRequests = true; When I iterate toMany relationship with ids array, each model gets by one generates separate request. How can I fix it?

1 post - 1 participant

Read full topic

By following the instructions at Stable TypeScript Types in Ember 5.1, I’ve been able to get VSCode autocomplete working in Discourse. We’re using JS (not TS), Ember 5.5, with Embroider.

/**
 * @typedef {import('ember-source/types')} EmberTypes
 */

This works pretty well, but does not appear to include @glimmer/component. So if I autocomplete on import Component, I get this:

@ember/component makes sense. But it seems weird that @ember/-internals/... and @glimmer/component/dist/.. are available.

Is there a @typedef statement which could help add @glimmer/component to this list? And is there any way to remove those internal modules from the list?

WIP branch can be found here: DEV: Switch to bundled Ember types by davidtaylorhq · Pull Request #25370 · discourse/discourse · GitHub

1 post - 1 participant

Read full topic

The Ember-data guides all refer to Adapters, but the documentation for the Adapters seems to indicate that they are deprecated in favor of the RequestManager and Handlers. Where can I find an example of configuring the Ember-data store using the RequsetManager to connect to a REST service?

1 post - 1 participant

Read full topic

Hi, I want to count the invocation of page within an ember app which means every time the user navigates to a new page (via link-to) the system should increment a counter for this page. My problem is that I have no idea on how to implement this behaviour. Any helpis appreciated

3 posts - 2 participants

Read full topic

Hi,

Currently I have a pretty big Ember application with build size of approx 9MB I am exploring options across dynamically loading the routes and components on visit. I tired with ember-auto-import but I didn’t find a way to split routes using this.

And Embroider is not a option as my ember version is below 3.28.11 which the pre-req. Any of them faced this kind of situation earlier or have you tried dynamic loading your ember app. Please suggest the method you tried and it’s impact too.

1 post - 1 participant

Read full topic

I have a component with a button and a click handler. In my test, I’m trying to simulate pressing Enter on the button, but it won’t fire the click handler. However when I manually do it, it does. Any ideas?

ember g component my-button -gc

<button type="button" {{on "click" this.onClick}}>
  Press enter on me
</button>

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyButtonComponent extends Component {
  @action
  onClick() {
    console.log('BOOM');
  }
}

module('Integration | Component | my-button', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
    await render(hbs`<MyButton />`);

    await focus('button');
    await triggerKeyEvent('button', 'keydown', 'Enter');
  });
});

The result of the test is that it doesn’t log “BOOM”. However, if I manually do it in the browser, “BOOM” is logged. Any ideas? Thanks in advance!

2 posts - 2 participants

Read full topic

I’ve created a homepage in the Drupal backend and want to display it in my Ember frontend, I already did set up an API endpoint in Drupal to expose the content of the homepage. How can fetch the data in my Ember frontend and render it on my homepage.

2 posts - 2 participants

Read full topic

Hey, everyone!

I’m trying to migrate my ember to the new node and ember version. For this, I updated packages from

 "devDependencies": {
    "@ember-intl/cp-validations": "^4.0.1",
    "@ember/jquery": "^1.1.0",
    "@ember/render-modifiers": "^1.0.2",
    "@fortawesome/ember-fontawesome": "^0.2.2",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "babel-eslint": "^10.1.0",
    "bootstrap-sass": "^3.4.1",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^3.1.0",
    "ember-auto-import": "^1.6.0",
    "ember-bootstrap": "^2.8.1",
    "ember-cli": "^3.17.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.19.0",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-dotenv": "^2.2.3",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-fastboot": "^2.2.2",
    "ember-cli-htmlbars": "^4.3.1",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-moment-shim": "^3.8.0",
    "ember-cli-notifications": "^6.3.2",
    "ember-cli-one-script": "0.0.1",
    "ember-cli-qunit": "^4.4.0",
    "ember-cli-sass": "^7.2.0",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^3.0.0",
    "ember-cli-update": "^0.54.6",
    "ember-composable-helpers": "^4.0.0",
    "ember-cp-validations": "^4.0.0-beta.10",
    "ember-cropperjs": "^0.8.0",
    "ember-data": "^3.17.0",
    "ember-data-storefront": "^0.18.0",
    "ember-decorators": "^6.1.1",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.1",
    "ember-file-upload": "^2.7.1",
    "ember-infinity": "^1.4.9",
    "ember-intl": "^5.5.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-modal-dialog": "^3.0.0-beta.4",
    "ember-moment": "^8.0.0",
    "ember-page-title": "^6.0.3",
    "ember-phoenix": "1.0.3",
    "ember-phone-input": "^5.2.1",
    "ember-power-select": "^4.1.0",
    "ember-resolver": "^8.0.0",
    "ember-route-action-helper": "^2.0.8",
    "ember-simple-auth": "^3.0.0",
    "ember-source": "^3.18.0",
    "ember-truth-helpers": "^2.1.0",
    "eslint-plugin-ember": "^8.14.0",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "torii": "^0.10.1",
    "fastboot-app-server": "3.0.0"
  }  

to this

"devDependencies": {
    "@babel/core": "^7.23.9",
    "@ember-intl/cp-validations": "^6.0.0",
    "@ember/jquery": "^1.1.0",
    "@ember/render-modifiers": "^2.1.0",
    "@fortawesome/ember-fontawesome": "^2.0.0",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@glimmer/component": "^1.1.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-polyfill-corejs3": "^0.9.0",
    "bootstrap": "^5.1.1",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^5.1.2",
    "ember-auto-import": "^2.7.2",
    "ember-bootstrap": "^5.1.1",
    "ember-cli": "^3.28.6",
    "ember-cli-app-version": "^6.0.1",
    "ember-cli-babel": "^8.2.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-dotenv": "^2.2.3",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-fastboot": "^4.1.2",
    "ember-cli-htmlbars": "^4.3.1",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-moment-shim": "^3.8.0",
    "ember-cli-notifications": "^9.0.0",
    "ember-cli-one-script": "0.0.1",
    "ember-cli-sass": "^11.0.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-uglify": "^3.0.0",
    "ember-cli-update": "^2.0.1",
    "ember-composable-helpers": "^5.0.0",
    "ember-cp-validations": "^6.0.0",
    "ember-cropperjs": "^0.9.6",
    "ember-data": "^3.28.13",
    "ember-data-storefront": "^0.18.1",
    "ember-decorators": "^6.1.1",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.1",
    "ember-file-upload": "^2.7.1",
    "ember-infinity": "^2.3.0",
    "ember-intl": "^5.7.2",
    "ember-load-initializers": "^2.1.2",
    "ember-modal-dialog": "^3.0.3",
    "ember-moment": "^10.0.0",
    "ember-page-title": "^6.0.3",
    "ember-phoenix": "1.0.3",
    "ember-phone-input": "^5.2.1",
    "ember-qunit": "^8.0.2",
    "ember-resolver": "^8.0.3",
    "ember-route-action-helper": "^2.0.8",
    "ember-simple-auth": "^3.0.0",
    "ember-source": "^3.28.6",
    "ember-truth-helpers": "^4.0.3",
    "eslint-plugin-ember": "^8.14.0",
    "fastboot-app-server": "4.1.2",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "sass": "^1.70.0",
    "torii": "^0.10.1",
    "webpack": "^5.90.1"
  }

Fortunately, I can build app and even see the results in a browser. But for some reason, some logic doesn’t work without any error or notification.

For test purposes, I removed all existing code from the application route and left only one action in

import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    refreshRoute() {
      console.log('Test')
      alert('Test')
    }
  }
});

template

<button type="button" class="btn btn-default" {{action "refreshRoute"}}>Test</button>

As a result I can’t see any binding and action doesn’t work

<button class="btn btn-default" type="button">Test</button>

The only errors I see in console:

validator.js:693 Uncaught Error: The `@glimmer/validator` library has been included twice in this application. It could be different versions of the package, or the same version included twice by mistake. `@glimmer/validator` depends on having a single copy of the package in use at any time in an application, even if they are the same version. You must dedupe your build to remove the duplicate packages in order to prevent this error.
    at Module.callback (validator.js:693:1)
    at Module.exports (loader.js:106:1)
    at Module._reify (loader.js:143:1)
    at Module.reify (loader.js:130:1)
    at Module.exports (loader.js:104:1)
    at Module._reify (loader.js:143:1)
    at Module.reify (loader.js:130:1)
    at Module.exports (loader.js:104:1)
    at requireModule (loader.js:27:1)
    at experimental-render-mode-rehydrate.js:4:1

Uncaught Error: Could not find module `front/services/store` imported from `(require)`
    at missingModule (loader.js:247:1)
    at findModule (loader.js:258:1)
    at requireModule (loader.js:24:1)
    at ModuleRegistry.get (index.js:24:1)
    at Class._extractDefaultExport (index.js:380:1)
    at Class.resolveOther (index.js:109:1)
    at Class.resolve (index.js:155:1)
    at resolve (index.js:945:1)
    at Registry.resolve (index.js:613:1)
    at has (index.js:958:1)

So I have no idea how to debug it and figure out why some functionality doesn’t work. Maybe fixing the problem above will help to resolve other problems. Ready to add any additional debug or other information

1 post - 1 participant

Read full topic

New to Ember.js.

I’m looking for a generic mouseover text utility. I found floating-ui and I mostly understand the vanilla tutorial. But I don’t understand how to make this into a generic modifier/helper…

Are there any good examples, libraries, etc. that provide an out of the box mouse over text?

3 posts - 2 participants

Read full topic

Starting a new project. I made some sample routes and everything works, but I’m receiving this error.

The results for ember -v:

ember-cli: 5.6.0 node: 20.11.0 os: win32 x64

Am I missing somethig?

3 posts - 2 participants

Read full topic

There are a number of WASM SPA frameworks emerging. Some interact with the DOM, others render on a canvas.

NONE of them support templates, or the MVC or MVVM design pattern that templates represents.

I think that leaves Ember in a unique position to do something to enable JS controllers & models to be replaced with Rust.

Maybe LinkedIn would have a vested interest in sponsoring something along those lines?

2 posts - 2 participants

Read full topic

Hi, I want to add fields dynamically, basically fields details will be fetched using api call.

Can someone please guide how can we achieve this using ember.

4 posts - 3 participants

Read full topic

I want to have my component update when a change is made to the session storage.

I’m using 5.4 and not TS. I think I need an observer, but there are two impediments. One, the example is in TS and I’m new enough to the web landscape that I can’t convert it to simple JS. Two, the documentation here and on other forums strongly discourage the use of observers.

3 posts - 2 participants

Read full topic

My company is requiring FIPS requirements in all of its applications. That means no MD5, which Ember-cli appears to use (at least in our ember 3.24 app).

I may be able to get an exception for this since it’s build code, but would rather just get it working.

Here’s the failure we are seeing digital envelope routines:EVP_DigestInit_ex:disabled for FIPS at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at md5 (/home/jenkins/workspace/myapp/node_modules/leek/lib/md5.js:7:12) at new Leek (/home/jenkins/workspace/mayapp/node_modules/leek/lib/leek.js:35:41) at module.exports (/home/jenkins/workspace/myapp/node_modules/ember-cli/lib/cli/index.js:122:16) at Object. (/home/jenkins/workspace/myapp/node_modules/ember-cli/bin/ember:34:1) at Module._compile (node:internal/modules/cjs/loader:1356:14) at Module._extensions…js (node:internal/modules/cjs/loader:1414:10) at Module.load (node:internal/modules/cjs/loader:1197:32) at Module._load (node:internal/modules/cjs/loader:1013:12) { library: ‘digital envelope routines’, function: ‘EVP_DigestInit_ex’, reason: ‘disabled for FIPS’, code: ‘ERR_OSSL_EVP_DISABLED_FOR_FIPS’

1 post - 1 participant

Read full topic

When transitioning using routerService.transitionTo("/home?a=b"), or via <LinkTo, Ember seems to strip out any query parameters which are not configured in the destination route/controller.

This makes sense if Ember is the only thing consuming the query parameters.

However, we have a number of situations where we want to preserve all query parameters. For example: we want to be able to add a link with an analytics parameter like /home?utm_campaign=foo, and have that parameter preserved when transitioning to the route. We don’t necessarily have a list of all the possible query parameters in advance, so ideally we would allow everything.

I can’t find anything in the documentation about this. Does anyone know of any solutions or safe(-ish) workarounds? As it stands, it seems like we’d be stuck overriding internal methods on the router… which obviously isn’t ideal

1 post - 1 participant

Read full topic

Hello folks, I’m having an issue with a third-party Ember application. I need to maintain a code that calls functions from the Ember SPA (Single Page Application). This code is a browser extension that explores a page written in Ember. This extension calls functions that used to exist in the window object but no longer do (I understand that using these functions might be wrong and prone to issues). The code is as follows:

const app = window.Ember.Namespace.NAMESPACES[1]
app.__container__.lookup('router:main').transitionTo('path');

Searching through documentation, I couldn’t find anything about this Ember availability in window, which leads me to think that the application might use some package for this purpose. The issue is that Ember has become undefined. My question is, where can I find reference to this? What could be the possible reasons for the application to no longer have this data? Is there another way to achieve the same result as transitionTo?

The goal is to navigate the user through the SPA while avoiding directly redirecting in the browser.

1 post - 1 participant

Read full topic

I have a project that I am updating from Ember 3.28 to Ember 5.4. After a lot of updating everything works perfectly in development, the app runs well and there are no errors. But it doesn’t load when opening it in production mode.

I get this error:

Uncaught Error: Could not find module `ember-simple-auth/initializers/ember-simple-auth` imported from `dashboard/initializers/ember-simple-auth`

It complains that it can’t load the ember-simple-auth module (I’m installing version 6.0.0 of that addon).

After investigating a debugging I’ve finally ended up checking the Ember modules registry. I think that is a part of Ember-CLI loader.js.

For some unknown reason, there are several packages that in development mode are being processed by the define method of the loader, but they are not in production. The define method is what includes items in the registry, one per each module available. Later when requiring models, Ember checks that registry. The registry is basically a dictionary with the modules names.

So I have checked the difference in the Object.keys values between the registry in development mode, and in production mode.

• For development I run: ember serve
• For production I run: ember serve -prod

And this is the list of packages missing in the registry in production mode:

"@popperjs/core",
"@stripe/stripe-js/pure",
"ember-cookies/services/cookies",
"ember-element-helper/helpers/element",
"ember-focus-trap/modifiers/focus-trap.js",
"ember-modifier",
"ember-moment/helpers/-base.js",
"ember-moment/helpers/is-after.js",
"ember-moment/helpers/is-before.js",
"ember-moment/helpers/is-between.js",
"ember-moment/helpers/is-same-or-after.js",
"ember-moment/helpers/is-same-or-before.js",
"ember-moment/helpers/is-same.js",
"ember-moment/helpers/moment-add.js",
"ember-moment/helpers/moment-calendar.js",
"ember-moment/helpers/moment-diff.js",
"ember-moment/helpers/moment-duration.js",
"ember-moment/helpers/moment-format.js",
"ember-moment/helpers/moment-from-now.js",
"ember-moment/helpers/moment-from.js",
"ember-moment/helpers/moment-subtract.js",
"ember-moment/helpers/moment-to-date.js",
"ember-moment/helpers/moment-to-now.js",
"ember-moment/helpers/moment-to.js",
"ember-moment/helpers/moment.js",
"ember-moment/helpers/now.js",
"ember-moment/helpers/unix.js",
"ember-moment/helpers/utc.js",
"ember-moment/services/moment.js",
"ember-page-title/helpers/page-title",
"ember-page-title/services/page-title",
"ember-simple-auth/initializers/ember-simple-auth",
"ember-simple-auth/services/session",
"ember-simple-auth/session-stores/application",
"ember-simple-auth/utils/inject",
"ember-simple-auth/utils/is-fastboot",
"ember-simple-auth/utils/location",
"ember-simple-auth/utils/objects-are-equal",
"ember-style-modifier/modifiers/style",
"ember-truth-helpers/helpers/and",
"ember-truth-helpers/helpers/eq",
"ember-truth-helpers/helpers/gt",
"ember-truth-helpers/helpers/gte",
"ember-truth-helpers/helpers/is-array",
"ember-truth-helpers/helpers/is-empty",
"ember-truth-helpers/helpers/is-equal",
"ember-truth-helpers/helpers/lt",
"ember-truth-helpers/helpers/lte",
"ember-truth-helpers/helpers/not",
"ember-truth-helpers/helpers/not-eq",
"ember-truth-helpers/helpers/or",
"ember-truth-helpers/helpers/xor",
"gh-ember-simple-auth-token/authenticators/jwt",
"gh-ember-simple-auth-token/initializers/simple-auth-token",
"validated-changeset",

There are also some more missing from ember-testing, but I guess that makes sense for production mode.

I have no idea why the previous list of modules are not being loaded into the registry when adding the -prod flag (same when using build). I’ve run the ember-auto-import and the webpack with the verbose flags, but I haven’t seen anything useful in the log.

I’ve also tried many different versions of the packages from that list, but nothing. Same result always.

Any ideas why some packages could be treated differently by the auto import / loader / webpack tools in production mode?

Thank you.

1 post - 1 participant

Read full topic

The docs for {{#in-element}} say:

insertBefore – by default the DOM element’s content is replaced when used as destinationElement . Passing null to insertBefore changes the behaviour to append the block content to the end of any existing content. Any other value than null is currently not supported.

Being able to pass an element reference to insertBefore would be very useful for my use case. So I was trying to work out why this restriction exists.

If I comment out this assertion in the template compiler:

Then it seems to ‘just work’. I can pass an element to insertBefore, and {{#in-element will render its content before that element. Perfect!

But… I assume there must be a reason this restriction was introduced. Does anyone know why? I can’t see any mention of it in RFC287 which promoted in-element to public API

1 post - 1 participant

Read full topic

I don’t understand why whatTimeIsIt is not updating in the DOM. Ideas?

The timer is ticking, I can set a breakpoint in the console and I see that whatTimeIsIt is changing…

@tracked whatTimeIsIt

timerId = null

updateWhatTimeIsIt() {
    this.whatTimeIsIt = (new Date()).toISOString()
}

constructor() {
    super(...arguments)
    this.updateWhatTimeIsIt()
    this.timerId = setInterval(this.updateWhatTimeIsIt, 1000 )
}

The display doesn’t update

<div>
<div>Timer</div>
<div>{{this.whatTimeIsIt}}</div>
</div>

4 posts - 2 participants

Read full topic