question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Initializing a service does not work in ember glimmer components

See original GitHub issue

🐞 Describe the Bug

Initializing a service does not work in ember glimmer components

🔬 Minimal Reproduction

app/initializers/pandaui.js

export function initialize( application ) {
  application.inject('route', 'pandaui', 'service:pandaui');
  application.inject('component', 'pandaui', 'service:pandaui');
  application.inject('controller', 'pandaui', 'service:pandaui');
}

export default {
  initialize
};

app/pods/pandaui/service.js

import Service from '@ember/service';

export default class PandauiService extends Service {
  block() {
    ...
  }

  unblock() {
    ...
  }
}

app/components/test-form/component.js

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

export default class TestFormComponent extends Component {
  @action
  testPandaService() {
    this.pandaui.block() **ERROR: Cannot read property 'block' of undefined**
  }
}

😕 Actual Behavior

The line this.pandaui.block() throws Cannot read property 'block' of undefined When I explicitly inject the service like below it works.

import { inject as service } from '@ember/service';
@service pandaui;

🤔 Expected Behavior

When I initialize a service, I think it is not needed to inject explicitly

Am i missing something? OR its a bug?

I think according to the doc that is all I need to do https://guides.emberjs.com/release/applications/initializers/#toc_application-initializers

🌍 Environment

  • Ember: - 3.26.0
  • Node.js/npm: - 10.16.3
  • OS: - MacOS darwin x64
  • Browser: - Chrome 89.0.4389.128

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
bertdeblockcommented, May 14, 2021

Implicit injections should work, but not for Glimmer components (which is by design, mentioned here). The example in the guides shows an implicit injection for routes, so even though deprecated, that example is still correct AFAICT.

EDIT: Created https://github.com/ember-learn/guides-source/issues/1684.

0reactions
rinoldsimoncommented, May 14, 2021

I’m referring to the guide https://guides.emberjs.com/v3.26.0/applications/initializers/ (3.26.0) - which has implicit injection in the example.

According to the above discussions, implicit injection is not working in 3.26 and it has been deprecated in 3.26? Correct? So the guide for 3.26 https://guides.emberjs.com/v3.26.0/applications/initializers/ should not have that example? Correct?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Glimmer Components - Octane Upgrade Guide - Ember Guides
In classic components, arguments are assigned directly to the class instance. This has caused a lot of issues over the years, from methods...
Read more >
How to set initial state of glimmer component based on ...
To track changes to currentModel in your editor component and set a default value, use the get accessor: get model() { return this.args....
Read more >
Converting Your Ember App to TypeScript - Inside Skylight
The first step is to run ember install ember-cli-typescript . ... is to mark offending parts of your code with a @ts-expect-error directive....
Read more >
Services - ember-cli-typescript
Any attempt to access a property or method not defined on the service will fail type-checking: import Component from '@glimmer/component';.
Read more >
The 8 Most Common Mistakes That Ember.js Developers Make
Ember.js is an awesome framework for building rich and powerful front-ends, ... Again, the dawn of routeable components will solve this problem, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found