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/optional-features@2.0.0
├── @ember/test-helpers@2.6.0
├── @embroider/compat@1.2.0
├── @embroider/core@1.2.0
├── @embroider/webpack@1.2.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@2.4.0
├── ember-cli-app-version@5.0.0
├── ember-cli-babel@7.26.11
├── ember-cli-dependency-checker@3.2.0
├── ember-cli-htmlbars@6.0.1
├── ember-cli-inject-live-reload@2.1.0
├── ember-cli-sri@2.1.1
├── ember-cli-terser@4.0.2
├── ember-cli@4.1.1
├── ember-data@4.1.0
├── ember-export-application-global@2.0.1
├── ember-fetch@8.1.1
├── ember-load-initializers@2.1.2
├── ember-page-title@7.0.0
├── ember-qunit@5.1.5
├── ember-resolver@8.0.3
├── ember-source@4.1.0
├── ember-template-lint@3.16.0
├── ember-welcome-page@6.1.0
├── eslint-config-prettier@8.4.0
├── eslint-plugin-ember@10.5.9
├── eslint-plugin-node@11.1.0
├── eslint-plugin-prettier@4.0.0
├── eslint-plugin-qunit@7.2.0
├── eslint@7.32.0
├── loader.js@4.7.0
├── npm-run-all@4.1.5
├── prettier@2.5.1
├── qunit-dom@2.0.0
├── qunit@2.18.0
├── tailwindcss@3.0.23
└── webpack@5.69.1

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