Cannot set property $inject of function SomeController which has only a getter

[kostetskyroma]

Hi everyone, I've faced with the issue when using babel-plugin-angularjs-annotate plugin v.0.10.0. I've received an error:

**Console**
Uncaught TypeError: Cannot set property $inject of function SomeController($scope, $state) {
...<omitted>... } which has only a getter

SomeController.js

const module = angular.module('module1', []);
export default class SomeController {
  static get $inject() {
    return ['$scope', '$state'];
  }
  constructor($scope, $state) {
    this.$scope = $scope;
    this.$state = $state;
}
module.controller('SomeController', SomeController);

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties", "angularjs-annotate"]
}

What is wrong in my config?

[kostetskyroma]

it seems that babel-plugin-angularjs-annotate doesn't support this syntax.

@schmod can you confirm it?

[zleight1]

I was able to fix this by having babel transpile to a lower target.

[timofei-iatsenko]

The problem in your case that you have already defined $inject property in your class. And it's defined as a getter without setter and treat as read-only. Plugin during its work annotate this class second time and try to assign variable into your getter, and this causes an error.

You have a few options here:

1. Disable implicit mode:

  "plugins": [["angularjs-annotate", { "explicitOnly" : true}]]

This way only explicitly annotated classes will be processed check docs: https://www.npmjs.com/package/babel-plugin-angularjs-annotate#explicitonly

Because your class doesn't have explicit annotation it will not be processed.

2. Remove $inject getter from your class. The purpose of this plugin is automatic annotating. You can safely remove this property and let the plugin do that job for you.

3. Change $inject getter to a property. This will not fix the root cause, class will still be annotated twice, but omit the error because re-assigning property not causing an error.

I was able to fix this by having babel transpile to a lower target.

Traspiling to lower target also just "mask" the issue, during transpiling to lower target your getters/setters get transpiled in the way which not causing error during re-assigning read-only property in run-time.

[StefanVlad]

Hey @zleight1

I am having the same problems so I was wondering what was the target that you set for babel to transpile the code in?

Thanks in advance!

[zleight1]

Hey @zleight1

I am having the same problems so I was wondering what was the target that you set for babel to transpile the code in?

Thanks in advance!

I'm using preset-env and have this browserslist

[production]
> 0.5%
chrome >= 70
edge >= 90
firefox >= 70
safari >= 13
ios_saf >= 11.1
not dead
not op_mini all
ie 11

[StefanVlad]

@zleight1 Thank you for the reply. Unfortunately, it did not solve my issue but I will keep trying. Much appreciated. Cheers!