Import not resolving in new Ember app

[richard-viney]

The suggested import isn't working when trying this out. Attempting to import gives the following:

Error: Can't resolve '@glimmer/tracking/primitives/cache'

Steps to reproduce:

1. ember new test-app (With Ember CLI 3.18.0)
2. cd test-app
3. ember install ember-cache-primitive-polyfill
4. Add import { createCache, getValue, isConst } from '@glimmer/tracking/primitives/cache'; to app/app.js.
5. ember serve

Then the error above appears.

I'm on macOS 10.15.4; Node.js 10.20.1; Ember.js 3.18.

Thanks!

[rwjblue]

@richard-viney - Can you throw together a quick demo repo that I can poke at? I think I know what is going on, but having the yarn.lock/package-lock.json would help a bunch.

[rwjblue]

I think emberjs/ember-cli-babel#337 will fix.

[rwjblue]

OK, I think if you ensure that you have [email protected] it should work properly. Please let me know if that doesn't fix it...

https://github.com/babel/ember-cli-babel/releases/tag/v7.20.0

[richard-viney]

Thanks for looking into this. I'm still seeing this with [email protected]

Build Error (Bundler)

Can't resolve '@glimmer/tracking/primitives/cache' ...

Repo that shows the problem is here: https://github.com/richard-viney/ember-cache-primitive-polyfill-import-error. All dependencies are on the latest stable versions.

A yarn install && yarn run ember serve should repro the above issue.

[rwjblue]

Hmph. OK, thank you, I'm sorry I really thought that would have resolved it 🤔

[wycats]

I hit the same issue, but it happened suddenly after working all day O_O

I dug in a bit and I'm not entirely sure what is supposed to make the import work in the first place though.

fwiw I have ember-cli-babel at ^7.20.0

[richard-viney]

Interesting, I never had it work here, but am currently working around the issue by using Ember._createCache and Ember._cacheGetValue directly instead of the suggested imports.

[wycats]

@richard-viney I was about to try that, but it seems weird that the polyfill infra just isn't working.

[wycats]

Somehow it started working again after I fiddled around a bit with the declared module I wrote in a .d.ts file.

I made this change:

- module "@glimmer/tracking/primitives/cache" {
+ declare module "@glimmer/tracking/primitives/cache" {

I suspect it's a red herring, but who knows.

[wycats]

Here's the log. I see enhanced-resolve in here. I wonder if it's relevant?

https://gist.github.com/wycats/a8cb76a4d23d36ff7217a30b953e1a3f

[tchak]

Same issue here. I am trying to use it from an addon.

[pzuraq]

It looks like this is being caused by ember-auto-import somehow. Removing the dependency causes things to start working again, and it transpiles correctly without it. cc @ef4

[wycats]

I can confirm that removing ember-auto-import resolved the issue for me. One weird thing: it doesn't happen for me simply because I have these two addons installed. There is some other factor (possibly related to hoisting resolution?) that causes it to happen sometimes but not other times for me. I can't tell whether it starts happening after I run yarn or whether it just happens randomly as a result of some timing artifact.

[simonihmig]

FWIW, I ran into a similar thing, though it was a runtime error (Error: Could not find module @glimmer/tracking/primitives/cache). Upgrading ember-cli-babel to latest (7.22.1) fixed this for me (in simonihmig/tracked-redux#3), with having ember-auto-import as a dependency...

[rwjblue]

This makes sense, thanks for shedding light on that @simonihmig! Basically, without a sufficiently recent ember-cli-babel version we aren't guaranteed that the module import will be transpiled into Ember._someGlobalMethod. When that doesn't happen, ember-auto-import will try to resolve the module and 💥.

[richard-viney]

It's good that some folks are managing to make this error disappear, but the original repro steps are still working for me here even with an upgrade to [email protected] and also upgrading all deps to their latest versions. I've not investigated further at this stage though.

[DLiblik]

I am seeing the same issue. Was working great and then all of a sudden stopped working - and I'm still on ember-cli-babel 7.18.0 - updating to 7.22.1 to see what happens (project is 3.17).

[wycats]

@rwjblue I'd be happy to set up some time to try to pair our way through this. I've experienced it a bunch and I think it's just a matter of digging deeply into it.

[richard-viney]

I'm still seeing the same error when removing this package and trying to use the cache primitive API present in [email protected]. Should I file this as a bug against the current Ember beta as well? Thanks.

[rwjblue]

@richard-viney - Can you confirm that the app or addon that is attempting to import is using at least [email protected]? Support was added for this import path in that version emberjs/ember-cli-babel#337 (but is possible to get via transitive dependency drift with others).

[richard-viney]

Yep the app's package.json contains:

"ember-cli-babel": "^7.22.1",
"ember-auto-import": "^1.6.0",

There are probably some other addons in use that specify older versions of ember-cli-babel, maybe even 6.x versions, but I'm assuming that wouldn't matter here?

[rwjblue]

What matters is the thing that is doing the import's, is that in the app itself?

[richard-viney]

Yep it's just in a source file under the app/ directory. The original repro I put together still shows the problem. I've updated it to the latest versions of all dependencies just now for good measure.

A clone, yarn install and yarn run ember serve of that repo gives the following for me:

Build Error (Bundler)

Can't resolve '@glimmer/tracking/primitives/cache' in '/Users/Richard/Code/ember-cache-primitive-polyfill-import-error'

[rwjblue]

Ya, the issue here is that @glimmer/tracking is a dep of the app and is not considered an ember-cli addon; this causes ember-auto-import to attempt to resolve it and 💥 (because there legitimately isn't a file in that location).

The quickest fix for your app is to exclude @glimmer/tracking from auto import:

// ember-cli-build.js
let app = new EmberApp(defaults, {
  autoImport: {
    exclude: ['@glimmer/tracking'],
  }
});

[rwjblue]

I just confirmed ^ in a demo app that I made to repro as well.

[richard-viney]

Great, that all makes sense.

Though won't most apps that try to use this feature end up with this error given that both ember-auto-import and @glimmer/tracking are in the default blueprint? Or maybe the app blueprint includes the above change in the ember-cli 3.22 betas (I haven't checked to confirm if this is the case).

[rwjblue]

Though won't most apps that try to use this feature end up with this error given that both ember-auto-import and @glimmer/tracking are in the default blueprint?

Yes. I wasn't saying that I thought my work around was acceptable 😉, just that it would unblock folks currently stuck. I'm working through the permutations to account for the issue without user interaction/changes/etc...

[rwjblue]

@richard-viney - I just confirmed that using @glimmer/[email protected] avoids the issue (same test app that errored with 1.0.1 builds successfully with 1.0.2). Would you mind confirming, and if it works for you without any special config close?

[rwjblue]

I've also landed a helpful warning for folks using older @glimmer/tracking versions, just to make sure folks aren't getting a super obtuse error without any meaningful feedback.

#74

[richard-viney]

Thanks, looks good!

[wycats]

Great work @rwjblue. Out of curiosity, what was the exact interaction?

[rwjblue]

@wycats - Basically, because the app has a devDep on ember-auto-import and on @glimmer/tracking and that @glimmer/tracking was not an Ember addon: ember-auto-import was actually trying to resolve @glimmer/tracking/primitives/cache from the real npm package which does not include this module.