Property name expected type of string but got null

[wmzy]

Hello,

Firstly, thank you very much for this babel plugin.

We're seeing the following exception on build

function foo(target: Object) {}
function bar(target: Object, propertyKey: string | symbol, parameterIndex: number) {}

@foo
export class Foo {
  constructor(@bar foo: any, @bar bar: any) {}
}

TypeError: /Users/x/projects/test-decorator/src/main.ts: Property name expected type of string but got null
    at validate (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/definitions/utils.js:159:13)
    at Object.validate (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/definitions/utils.js:228:7)
    at validateField (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at validate (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at String.builder (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/builders/builder.js:39:27)
    at Object.identifier (/Users/x/projects/test-decorator/node_modules/@babel/types/lib/builders/generated/index.js:345:27)
    at /Users/x/projects/test-decorator/node_modules/babel-plugin-parameter-decorator/lib/index.js:23:82
    at /Users/x/projects/test-decorator/node_modules/babel-plugin-parameter-decorator/lib/index.js:222:85
    at Array.forEach (<anonymous>)
    at /Users/x/projects/test-decorator/node_modules/babel-plugin-parameter-decorator/lib/index.js:204:30 {
  code: 'BABEL_TRANSFORM_ERROR'
}

Reproduce repo: https://github.com/wmzy/test-decorator .

Note the .browserslistrc is chrome > 80.

[guyca]

I faced the same issue and found out it was due to a regression in @babel/traverse version 7.17.x. I locked this transitive dependency to 7.16.x.

Here's a link to my babel.config.js in case you need it.

[wmzy]

@guyca Thanks.
I found use overrides (for yarn) could lock the @babel/traverse version easily.

[michael42]

This also causes a different error, for example in this minimal demo project:

function test(target, property, descriptor) {
}

class Greeter {
    @test
    greet(@test name) {
    }
}

is compiled to

var _class;
// [...]
let Greeter = (
    _class =
        (
            test(_class /* <-- this is undefined */.prototype, "greet", 0), class Greeter {
                greet(name) {
                }

            }
        ), (
        _applyDecoratedDescriptor(
            _class.prototype,
            "greet",
            [test],
            Object.getOwnPropertyDescriptor(_class.prototype, "greet"),
            _class.prototype,
        )
    ), _class
);

which then throws when executing

TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object.<anonymous> (test.babel.js:7:38)

The workaround also fixed that issue.

[wmzy]

I created a new plugin: babel-plugin-typescript-decorators .

it is modified from @babel/plugin-proposal-decorators. It will process parameter decorators before class escaping. In theory it would be more efficient and secure.

[guyca]

@wmzy This is great! Thanks for sharing. I see the code was pushed a few months ago, are you already using this plugin in production?

[wmzy]

@guyca Yes.

[guyca]

@wmzy If the only change is the order in which decorators are processed? Do you think we can submit a PR to Babel instead of forking the decorator's plugin?

[wmzy]

@guyca I don't think babel wants to support this syntax feature. Because it's just an experimental feature of TS and is likely to be deprecated.