[Bug] Compat issue with current and pre-3.27.0 versions of ember-source

[MelSumner]

🐞 Describe the Bug

I built a new addon with 3.27.2 and found that it did not work in any apps that use ember-source prior to 3.27.0 (I specifically tested 3.22.0, 3.24.0, 3.26.1, 3.27.0).

🔬 Minimal Reproduction

1. Create a new addon
2. Create a new component in the addon and put something in the template (just want anything to be there, so it's easily obvious)
3. Create a new app (w/deps installed)
4. In the addon's root directory, run yarn link(or npm link)
5. Add "addon-name": "link:~/path/to-addon" in the addon's package.json (if you're on Windows, you might have to use "file" instead of "link")
6. Use yarn link "my-addon" in the app's root directory
7. Use the component from the addon in the app's application.hbs template
8. Run ember s in the app
9. See if the component renders to the browser
10. if yes: stop the server, downgrade the version of ember-source by 1 version, npm/yarn install, run ember s and see if the app renders

😕 Actual Behavior

I see an error in the browser console: "Cannot find module `@ember/component in (addon name)" when I have an addon on 3.27.2 and an app that is anything before 3.27.0. Conversely, if I downgrade my addon to pre-3.27.0, I can use it in pre-3.27.0 apps.

🤔 Expected Behavior

I expect minor versions to be compatible.

🌍 Environment

I tried this on both latest MacOS and latest Windows, both with latest Chrome.

➕ Additional Context

I used yarn why ember-source to confirm that I was getting different versions of ember-source.

[kategengler]

@MelSumner Can you share a reproduction? What is in your addon? Did you consume anything from the addon in the host app?

[kategengler]

I missed that step of creating a component and using it. I see the error when I do so (3.27.2 addon and 3.24.0 app).

I played with adding a backing class to the component I generated, making it a glimmer component to see if that would work, but @ember/component still ends up referenced, here's the compiled component:

define("test-foo/components/what", ["exports", "@ember/component", "@glimmer/component"], function (_exports, _component, _component2) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;

  const __COLOCATED_TEMPLATE__ = Ember.HTMLBars.template(
  /*
    Hello again{{yield}}
  
  */
  {
    "id": "AmEtBAC8",
    "block": "{\"symbols\":[\"&default\"],\"statements\":[[2,\"Hello again\"],[18,1,null],[2,\"\\n\"]],\"hasEval\":false,\"upvars\":[]}",
    "moduleName": "test-foo/components/what.hbs"
  });

  class WhatComponent extends _component2.default {}

  _exports.default = WhatComponent;
  (0, _component.setComponentTemplate)(__COLOCATED_TEMPLATE__, WhatComponent);
});

[MelSumner]

@kategengler thank you for confirming the issue.

@pzuraq should I be looking in Glimmer packages to see if something is exporting @ember/component (which, per @rwjblue doesn't exist)? I see https://github.com/glimmerjs/glimmer.js/blob/d022fac5a5b9b5b6258298285fc5deb55254d2bb/packages/%40glimmer/component/addon/index.ts#L12 with a cursory search but when it comes to glimmer source code I'm a bit out of my depth.

[pzuraq]

Nothing in the Glimmer packages should be exporting @ember/component, it is imported in order to set the component manager, but that doesn't seem to be what's causing the issue here exactly.

I think this is likely a bug with the globals transform in ember-cli-babel and ember-cli-htmlbars. Essentially, prior to 3.27.2, we would always convert references to @ember/component to Ember.Component, because the package did not exist. Post 3.27.2 the package does exist, and the globals transform is not run.

What's probably happening is ember-cli-htmlbars is converting this file into something like:

import { setComponentTemplate } from '@ember/component';
import { createTemplateFactory } from '@ember/template-factory';
import Component from '@glimmer/component';


class WhatComponent extends Component {}

setComponentTemplate(createTemplateFactory('wat'), WhatComponent);

At this point, we do have the import from @ember/component in this file. Later on, this gets converted into the built output that @kategengler posted, the template is compiled, etc. But @ember/component has not been removed as an import for some reason, which is the bug.

[kategengler]

Cannot reproduce when referencing an addon via github (and presumably npm). Can reproduce when addon is referenced via the filesystem.

3.24 app with addon referenced via file system and component from addon in use https://github.com/kategengler/ember-324 reproduces the problem

3.27 addon with component https://github.com/kategengler/test-foo

Clone the addon side-by-side with the app to see the bug. Change file://../test-foo in the app to kategengler/test-foo to see it work.

[locks]

Closing as no longer relevant. Sorry for letting the issue slip!