Running with mobx decorator got error

[haanamomo]

Error messages are as follows:

SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (20:0)

...

 at Object._raise (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:816:17)
    at Object.raiseWithData (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:809:17)
    at Object.expectOnePlugin (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:9920:18)
    at Object.parseDecorator (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12727:10)
    at Object.parseDecorators (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12709:30)
    at Object.parseStatement (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12542:12)
    at Object.parseBlockOrModuleBlockBody (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:13134:25)
    at Object.parseBlockBody (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:13125:10)
    at Object.parseProgram (.../node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12468:10)

[juanrgm]

The problem was introduced here (v3.0.0).

Why decorators-legacy and class-properties plugins were deleted?

[blutorange]

Hmm, if you read through #88 it seems this was an intentional change, these plugins are not activated by default. You can use the option

"importOrderParserPlugins" : ["classProperties", "decorators-legacy"]

I guess it should be mentioned in the migration guide though?

[juanrgm]

But why were they deleted from plugin default list?

Now I must create a .prettierrc file (with importOrderParserPlugins option) in every project where I use decorators.

[blutorange]

You might need to wait for the authors to reply, but from what I can tell, it's because those are either deprecated features or experimental ES proposals. At least decorators as implemented by TypeScript are based on an outdated proposal. So I guess it makes sense not to include them by default. It's a breaking change though, which is why the version was bumped to 3.x

Now that we are adding this, we need to remove the legacy decorator that we are adding automatically

There's also this comment:

Thanks or applying the changes to README. The issue is that there cannot be 2 decorator plugins at the same time.

Not sure, but I take that to mean that there are different decorator plugins (from TypeScript and Babel, perhaps?), which are incompatible

[juanrgm]

The solution to support both decorator plugins it was to support none by default, but with the new option added (importOrderParserPlugins) you can override that default config, no?

Now prettier, without prettier-plugin-sort-imports, can successfully format the next code:

function test(constructor: Function) {}
@test
class A {}

But if you install prettier-plugin-sort-imports:

[error] src\index.ts: SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)

Adding the plugins to importOrderParserPlugins fixes the issue, but was it mandatory requirement delete the default plugins?

[byara]

Hey @fangwei18 and @juanrgm, sorry that you are facing this issue. As you know, we were adding few babel parser plugins by default in version 2, legacy-decorator, typescript and jsx. The issue is there are other proposals for decorators and passing 2 parser plugins to babel for the decorators is not possible. Therefore we decided to let the user decides what parser to pass. To solve the issue, you should create a . prettierrc file and pass proper importOrderParserPlugins value.
I'm going to close the issue, but if you have other problems with the plugin, feel free to open a new issue.