Uncaught TypeError: (0 , decorators[i]) is not a function

[escobera]

I'm trying to use yeti-table along with ember-decorators and native es classes but I'm having trouble getting it all to work along.

This is my package.json

  // ...
  "devDependencies": {
    "@ember-decorators/babel-transforms": "^5.1.2",
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "babel-eslint": "^10.0.1",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^3.1.0",
    "ember-cli": "~3.7.1",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.1.2",
    "ember-cli-dependency-checker": "^3.0.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-htmlbars": "^3.0.0",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-sass": "^9.0.1",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-concurrency": "^0.8.26",
    "ember-concurrency-decorators": "^0.5.3",
    "ember-data": "~3.7.0",
    "ember-decorators": "^5.1.2",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-paper": "^1.0.0-beta.22",
    "ember-qunit": "^3.4.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.7.0",
    "ember-welcome-page": "^3.2.0",
    "eslint-plugin-ember": "^5.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.0",
    "sass": "^1.16.1"
  }
// ...

And with this component:

import Component from '@ember/component';
import { inject as service } from '@ember-decorators/service';
import { task } from 'ember-concurrency-decorators';

export default class BuscaProcessos extends Component {

  @service store

  init() {
    super.init(...arguments);
    this.set('nome', '');
    this.set('partesExatas', []);
    this.set('partesNaoExatas', []);
  }

  @task
  *buscarProcessos(nome, cpfCnpj) {
    let partes = yield this.store.query('parte', { q: nome });

    let partesExatas = [];
    let partesNaoExatas = [];

    partes.forEach(parte => {
      if (parte.get('cpfCnpj') == cpfCnpj) {
        partesExatas.push(parte);
      } else {
        partesNaoExatas.push(parte);
      }
    });

    this.set('partesExatas', partesExatas);
    this.set('partesNaoExatas', partesNaoExatas);
  }
}

I'm getting:

Don't know how to proceed from here, any help will be greatly appreciated =)

[miguelcobain]

I think the problem is that you have a too recent version of ember-decorators and babel-transforms. This is something that happens because of the way ember-cli works. Only one of the version of the same addon is shipped. That means that, if two dependencies depend on incompatible versions, one of them wins.

This is something that should already be fixed on master. I just didn't release a new version because I need some docs written before.

To see if this was fixed, though, you can already depend on master using "ember-yeti-table": "miguelcobain/ember-yeti-table" in your package.json and then running npm install/yarn.

Can you please try that and report back if it works?

[escobera]

Yeah, it works on master. I'm closing this, then. Thanks a lot!

[miguelcobain]

Related to https://github.com/miguelcobain/ember-yeti-table/issues/13

[sumeetattree]

Still experiencing this on 0.1.0. Is there a workaround without using the master branch? Thanks!

[miguelcobain]

@sumeetattree can you update to 0.1.0?

[sumeetattree]

Tried both 0.1.0 and master. Same issue on both. Fresh install.

[miguelcobain]

Are you using ember-decorators or ember-decorators-argument in your app? If so, what version? Also, what is your ember-cli-babel version?

[sumeetattree]

No, not using ember-decorators or ember-decorators-argument.

ember-cli-babel: 7.1.2

[miguelcobain]

@sumeetattree also, what is the ember-source version?

[sumeetattree]

ember-cli: ~3.6.0 ember-source: ~3.6.0

Edit: Should I paste the entire package.json? Edit2: If you need more info we can move to discord as well.

[miguelcobain]

@sumeetattree I generated a new project using ember new and couldn't reproduce the issue. Everything works fine. Perhaps you could share your package.json or maybe a repo/twiddle with app that reproduces that problem?

[sumeetattree]

Just tried updating to ember-cli-babel: 7.4.1.

  "devDependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "@sentry/browser": "4.4.2",
    "bootstrap": "^4.2.1",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^4.0.1",
    "ember-awesome-macros": "^3.1.0",
    "ember-bootstrap": "^2.4.0",
    "ember-bootstrap-cp-validations": "^1.0.0",
    "ember-bootstrap-power-select": "^1.0.0",
    "ember-browserify": "^1.2.2",
    "ember-cable": "^0.7.0",
    "ember-cli": "~3.6.0",
    "ember-cli-accounting": "^2.0.1",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-autoprefixer": "^0.8.0",
    "ember-cli-babel": "^7.4.1",
    "ember-cli-cjs-transform": "^1.3.0",
    "ember-cli-dependency-checker": "^3.0.0",
    "ember-cli-deploy": "^1.0.1",
    "ember-cli-deploy-lightning-pack": "^1.1.2",
    "ember-cli-deploy-sentry": "^0.6.0",
    "ember-cli-dotenv": "^2.0.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-flash": "^1.4.3",
    "ember-cli-htmlbars": "^3.0.1",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "https://github.com/sumeetattree/ember-cli-inject-live-reload.git#master",
    "ember-cli-moment-shim": "^3.5.0",
    "ember-cli-sass": "^7.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "^1.7.0",
    "ember-cli-template-lint": "^1.0.0-beta.2",
    "ember-cli-uglify": "^2.1.0",
    "ember-cli-update": "^0.27.3",
    "ember-composable-helpers": "^2.1.0",
    "ember-concurrency": "^0.8.26",
    "ember-cp-validations": "^4.0.0-beta.5",
    "ember-data": "~3.6.0",
    "ember-debug-logger": "^1.0.0",
    "ember-devtools": "^6.0.0",
    "ember-engines": "^0.5.25",
    "ember-export-application-global": "^2.0.0",
    "ember-fetch": "^6.4.0",
    "ember-get-config": "^0.2.4",
    "ember-git-version": "^0.1.2",
    "ember-i18n": "^5.2.1",
    "ember-inflector": "~3.0.0",
    "ember-leaflet": "^3.0.17",
    "ember-load-initializers": "^1.1.0",
    "ember-lodash": "^4.19.4",
    "ember-macro-helpers": "^2.1.0",
    "ember-math-helpers": "^2.8.1",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-moment": "^7.8.0",
    "ember-poll": "^1.4.0",
    "ember-power-select": "^2.2.1",
    "ember-power-select-blockless": "^0.5.0",
    "ember-qunit": "^3.4.1",
    "ember-radio-button": "^1.2.0",
    "ember-resolver": "^5.0.1",
    "ember-responsive": "^3.0.0-beta.3",
    "ember-route-action-helper": "^2.0.6",
    "ember-simple-auth": "^1.8.0",
    "ember-source": "~3.6.0",
    "ember-sprite": "^0.8.0",
    "ember-yeti-table": "^0.1.0",
    "ember-truth-helpers": "^2.1.0",
    "ember-welcome-page": "^3.2.0",
    "ember-wormhole": "^0.5.5",
    "eslint-plugin-ember": "^5.2.0",
    "eslint-plugin-hbs": "^0.1.1"
  },

I am using ember-yeti-table inside an engine. Here's the engine's package.json

  "dependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "babel-plugin-htmlbars-inline-precompile": "^1.0.0",
    "ember-browserify": "^1.2.2",
    "ember-bootstrap": "^2.4.0",
    "ember-cli-babel": "*",
    "ember-cli-htmlbars": "*",
    "ember-cli-htmlbars-inline-precompile": "*",
    "ember-cli-sass": "^7.2.0",
    "ember-concurrency": "^0.8.26",
    "ember-cp-validations": "^4.0.0-beta.5",
    "ember-data": "~3.6.0",
    "ember-moment": "^7.7.0",
    "ember-yeti-table": "^0.1.0",
    "node-sass": "^4.11.0"
  }

This is the exception:

Uncaught Exception: 
 TypeError: (0 , _decorator.decorator) is not a function

Edit: It appears that _decorator exists but _decorator.decorator is undefined. Here's what the _decorator object looks like:

// addon-tree-output/ember-yeti-table/-private/decorators/default-if-undefined.js
// Line 18
// _decorator object
{
  decoratorWithParams: ƒ decoratorWithParams(fn)
  decoratorWithRequiredParams: ƒ decoratorWithRequiredParams(fn)
  default: {decoratorWithParams: ƒ, decoratorWithRequiredParams: ƒ, default: {…}, __esModule: true}
  __esModule: true
  __proto__: Object
}

[miguelcobain]

@sumeetattree my guess is that some other dependency is forcing an older version of ember-decorators. This is a common problem for many people these days.

Can you tell me the output of yarn why ember-decorators? If my suspicion is correct, you probably have an older version of ember-decorators and that yarn command should tell you which dependency is forcing which ember-decorators version.

To read more on the issue and to help to avoid it in the future, I strongly recommend ember-cli-dependency-lint addon and its readme: https://github.com/salsify/ember-cli-dependency-lint

[sumeetattree]

I suspect it's ember-popper. This issue was still present even without ember-table. Thank you for pointing me to ember-dependency-lint. Did not know about it.

=> Found "ember-decorators@2.5.2"
info Reasons this module exists
   - "ember-table" depends on it
   - Hoisted from "ember-table#ember-decorators"
info Disk size without dependencies: "716MB"
info Disk size with unique dependencies: "4.43GB"
info Disk size with transitive dependencies: "40.46GB"
info Number of shared dependencies: 131
=> Found "ember-yeti-table#ember-decorators@5.1.2"
info This module exists because "ember-yeti-table" depends on it.
info Disk size without dependencies: "352MB"
info Disk size with unique dependencies: "4.07GB"
info Disk size with transitive dependencies: "40.1GB"
info Number of shared dependencies: 131
=> Found "ember-popper#ember-decorators@2.1.0"
info This module exists because "ember-bootstrap#ember-popper" depends on it.
info Disk size without dependencies: "296MB"
info Disk size with unique dependencies: "4.02GB"
info Disk size with transitive dependencies: "40.05GB"
info Number of shared dependencies: 131
✨  Done in 3.94s.

[miguelcobain]

@sumeetattree so, ember-decorators 2.5.2 is being used, and that is the problem.

Seems like you're using ember-bootstrap, which depends on ember-popper ^0.9.0.

From my investigation, ember-popper 0.9.0 depends on ember-decorators, but ember-popper 0.9.2 (latest) removed that dependency.

🤔

Some things I suggest:

• perhaps yarn.lock or package-lock.json are stopping ember-popper 0.9.2 from being used. So try removing the lock files and reinstall dependencies. Maybe that will pick up ember-popper 0.9.2.
• Can you try updating ember-bootstrap to ^2.5.0? Not sure if that will fix it. Since 2.4.0 depended on the same version of ember-popper.
• you can use yarn resolutions to force a specific version of ember-popper
• PRing ember-bootstrap to use "ember-popper": "^0.9.2" should definitely work. You can use your ember-bootstrap fork while the PR isn't merged/released.

[sumeetattree]

@miguelcobain Removing ember-table and re-creating yarn.lock worked. Thank you!