built-in cached decorator causes "decorator is not a function" error.

[NullVoxPopuli]

my component (in browser)

let Game = (0,_externals_ember_component__WEBPACK_IMPORTED_MODULE_2__.setComponentTemplate)((0,_externals_ember_template_factory__WEBPACK_IMPORTED_MODULE_1__.createTemplateFactory)(
/*
  
    {{this.todaysWord}}



  
*/
{
  "id": "mu2ajeIA",
  "block": "[[[1,\"\\n    \"],[1,[30,0,[\"todaysWord\"]]],[1,\"\\n\\n\\n\\n  \"]],[],false,[]]",
  "moduleName": "wordle/components/game.ts",
  "isStrictMode": true
}), (_class = class Game extends _glimmer_component__WEBPACK_IMPORTED_MODULE_3__["default"] {
  // wordList = trackedFunction(this, async () => {
  //   return await import(/* webpackIgnore */ '/words.js');
  // });
  get todaysWord() {
    let {
      answers
    } = this.wordList.value;
    let index = toDate(this.args.day).getTime() % answers.length;
    return answers[index];
  }

  get state() {
    return initialStateFor(this.args.day);
  }

}, ((0,_home_lprestonsegoiii_Development_NullVoxPopuli_wordle_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor_js__WEBPACK_IMPORTED_MODULE_0__["default"])(_class.prototype, "todaysWord", [_glimmer_tracking__WEBPACK_IMPORTED_MODULE_4__.cached], Object.getOwnPropertyDescriptor(_class.prototype, "todaysWord"), _class.prototype), (0,_home_lprestonsegoiii_Development_NullVoxPopuli_wordle_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor_js__WEBPACK_IMPORTED_MODULE_0__["default"])(_class.prototype, "state", [_glimmer_tracking__WEBPACK_IMPORTED_MODULE_4__.cached], Object.getOwnPropertyDescriptor(_class.prototype, "state"), _class.prototype)), _class));

source

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { cached } from '@glimmer/tracking';
import { tracked } from 'ember-deep-tracked';
// import { trackedFunction } from 'ember-resources';

interface Args {
  // year-month-day
  day: string;
}

export default class Game extends Component<Args> {
  // wordList = trackedFunction(this, async () => {
  //   return await import(/* webpackIgnore */ '/words.js');
  // });

  @cached
  get todaysWord() {
    let { answers }  = this.wordList.value;
    let index = toDate(this.args.day).getTime() % answers.length;

    return answers[index];
  }

  @cached
  get state() {
    return initialStateFor(this.args.day);
  }


  <template>
    {{this.todaysWord}}

  </template>
}

function initialStateFor(day) {
  return {};
}

function toDate(dayString: string) {
  let [year, month, day] = dayString.split('-');
  let date = new Date(year, month, day);

  return date;
}

cached was introduced to ember natively here:

• Implement @cached emberjs/ember.js#19772

and released in:

• https://github.com/emberjs/ember.js/releases/tag/v4.1.0

my app's version of ember:

• 4.3.0-alpha.2

This might be related to:

• Support a project having prerelease versions #1080

[NullVoxPopuli]

this errors happens on 4.1.0 as well

[ef4]

@glimmer/tracking is 100% shenanigans, the implementation inside the package itself doesn't even work in ember. So we're forced to completely replace it with a compat adapter:

embroider/packages/compat/src/compat-adapters/@glimmer/tracking.ts

Line 23 in b9f0f31

`export { createCache, getValue, isConst } from "@ember/-internals/metal";`

If you add cached to that line it should fix the problem.

[mkszepp]

@ef4 @NullVoxPopuli i have tested the @cached decorator with embroider v1.2.0 and it doesn't work

Ember: 4.1.0
Embroider: 1.2.0
OS: Win 10

Steps to reproduce:

1. Create a new ember app with embroider ember new test-app ---embroider=true
2. ember g controller application
3. Add the following code in project

import Controller from '@ember/controller';
import { cached } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
    @cached
    get title() {
        return 'Cached test';
    }
}

[trabus]

Also hitting this on a brand new ember-cli v4.1.1 app with 1.2.0

├── @ember/[email protected]
├── @ember/[email protected]
├── @embroider/[email protected]
├── @embroider/[email protected]
├── @embroider/[email protected]
├── @glimmer/[email protected]
├── @glimmer/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

export 'cached' (imported as 'cached') was not found in '@glimmer/tracking' (possible exports: tracked)

I tried two ways, one by using ember new my-app --embroider and then generating a new app and adding embroider manually, and I hit the import error both ways.

[mkszepp]

@trabus the bug should be fixed with this changes: #1135.

The fix is already in main branch and we need to wait for a release

As work around, you can use the ember-cached-decorator-polyfill, but it works only with embroider <= 1.0.0, because in 1.1 it was added the @cached on the wrong spot

[mkszepp]

@trabus fix is now released in embroider v1.3