SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (118:33) #22

jmls · 2020-12-28T13:39:56Z

when I install this plugin, vscode and prettier stop formatting with the above error

I'm using vscode 1.52.1, with typescript 4.1.2

the stack trace is this

at Object._raise (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:748:17)
	at Object.raiseWithData (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:741:17)
	at Object.expectPlugin (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:9106:18)
	at Object.parseClassProperty (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12722:12)
	at Object.parseClassProperty (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6968:18)
	at Object.pushClassProperty (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12690:30)
	at Object.parseClassMemberWithIsStatic (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12595:14)
	at Object.parseClassMemberWithIsStatic (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6856:11)
	at Object.parseClassMember (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12532:10)
	at callParseClassMember (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6820:13)
	at Object.parseClassMember (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6826:7)
	at /workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12477:14
	at Object.withTopicForbiddingContext (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11516:14)
	at Object.parseClassBody (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12454:10)
	at Object.parseClass (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12427:22)
	at Object.parseStatementContent (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11718:21)
	at Object.parseStatementContent (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6806:18)
	at Object.parseStatement (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11676:17)
	at Object.parseExportDeclaration (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12892:17)
	at Object.parseExportDeclaration (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6927:27)
	at Object.maybeParseExportDeclaration (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12848:31)
	at Object.parseExport (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12786:29)
	at Object.parseExport (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6769:20)
	at Object.parseStatementContent (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11782:27)
	at Object.parseStatementContent (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:6806:18)
	at Object.parseStatement (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11676:17)
	at Object.parseBlockOrModuleBlockBody (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12258:25)
	at Object.parseBlockBody (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:12249:10)
	at Object.parseTopLevel (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:11607:10)
	at Object.parse (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:13415:10)
	at Object.parse (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/parser/lib/index.js:13468:38)
	at Object.preprocessor [as preprocess] (/workspace/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/preprocessor.js:21:24)```

The text was updated successfully, but these errors were encountered:

jennmueng · 2021-01-09T09:38:23Z

I have this issue as well, I do have '@babel/plugin-proposal-class-properties' in my babel.config.js and works elsewhere just fine.

levenleven · 2021-01-19T12:07:41Z

The problem is that loadPartialConfig() doesn't return options in format expected by parser.
https://github.com/trivago/prettier-plugin-sort-imports/blob/master/src/preprocessor.ts#L17-L20

robinzachmann · 2021-01-20T08:29:00Z

I'm having the same issue. Does someone know a workaround for this? I have just a single class that is causing the stated error.

jennmueng · 2021-01-20T08:55:43Z

I'm having the same issue. Does someone know a workaround for this? I have just a single class that is causing the stated error.

@robinzachmann You can add one of these to this array here:

prettier-plugin-sort-imports/src/preprocessor.ts

Line 15 in e212c05

plugins: ['typescript', 'jsx'],

For example, classProperties would fix this issue.

levenleven · 2021-01-20T12:58:17Z

This is how prettier defines the plugins list https://github.com/prettier/prettier/blob/master/src/language-js/parser-babel.js

gregkonush · 2021-02-18T22:51:17Z

having the same issue with SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (28:19)

rek · 2021-03-01T15:27:56Z

For example, classProperties would fix this issue.

classProperties worked for me, but then I ran into Unexpected token when it came across a typescript generic

byara · 2021-03-16T15:14:56Z

Thanks everyone for bringing up this issue. With the release of v2.0.1, this should be fixed.
Either prettier will figure out the syntax correctly, or you can use experimentalBabelParserPluginsList in your .prettierrc to pass the correct parser name.

If there was still problems, you can of course re-open this issue.

ziaulrehman40 · 2021-04-22T08:28:36Z

Am I the only one still getting this error on latest verions?

fixes trivago/prettier-plugin-sort-imports#22

* fix: outdated packages with vulnerabilities * feat: install eslint and initiate config * feat: install prettier and set prettier options * feat: install eslint-config-prettier * feat: install eslint-plugin-prettier * chore: reformat eslint config * feat: add @trivago/prettier-plugin-sort-imports, define preferred import order * fix: css-loader file resolution bug introduced by CRA v4 In recent commits, we upgraded our react-scripts version from 3.4.4 to 4.0.3. This is because CRA (create-react-app) v3 uses an outdated version of eslint (facebook/create-react-app#8849). This introduced a bug related to the css-loader library, which can no longer resolve assets in the public folder: - facebook/create-react-app#9870 (comment) - webpack-contrib/css-loader#1136 (comment) This commit fixes this bug by moving the referenced image to the relevant sub-directory in the src directory. * chore: temporarily disable eslint * chore: add more files and folders to .prettierignore * chore: upgrade prettier-plugin-sort-imports to 2.0.2 fixes trivago/prettier-plugin-sort-imports#22 * chore: temporarily disable prettier * chore: remove prettier config temporarily * chore: remove jsx-a11y references temporarily * temporarily remove import/prefer-default-export reference Co-authored-by: jiehao <jiehao@open.gov.sg> Co-authored-by: Preston Lim <prestonlimlianjie@gmail.com>

* Add linting and formatting tools (#378) * fix: outdated packages with vulnerabilities * feat: install eslint and initiate config * feat: install prettier and set prettier options * feat: install eslint-config-prettier * feat: install eslint-plugin-prettier * chore: reformat eslint config * feat: add @trivago/prettier-plugin-sort-imports, define preferred import order * fix: css-loader file resolution bug introduced by CRA v4 In recent commits, we upgraded our react-scripts version from 3.4.4 to 4.0.3. This is because CRA (create-react-app) v3 uses an outdated version of eslint (facebook/create-react-app#8849). This introduced a bug related to the css-loader library, which can no longer resolve assets in the public folder: - facebook/create-react-app#9870 (comment) - webpack-contrib/css-loader#1136 (comment) This commit fixes this bug by moving the referenced image to the relevant sub-directory in the src directory. * chore: temporarily disable eslint * chore: add more files and folders to .prettierignore * chore: upgrade prettier-plugin-sort-imports to 2.0.2 fixes trivago/prettier-plugin-sort-imports#22 * chore: temporarily disable prettier * chore: remove prettier config temporarily * chore: remove jsx-a11y references temporarily * temporarily remove import/prefer-default-export reference Co-authored-by: jiehao <jiehao@open.gov.sg> Co-authored-by: Preston Lim <prestonlimlianjie@gmail.com> * Fix/resource color (#430) * fix: resource page header changed to bg-secondary * fix: using isResourcePage to determine page header * Fix/rearrange layout (#427) * fix: simplify directoryFile utils for retrieve and update * fix: update methods using directoryFile utils * fix: introduce FolderReorderingModal * fix: refactors FolderContent * fix: update params for FolderContentItem * fix: fix breadcrumb display * fix: add propTypes for FolderReorderingModal * fix: add Cancel button to FolderReorderingModal * fix: updates draggable-id for React dnd * fix: updates dropdown button behavior for reordering * fix: updates copy text * fix: updates copy text * fix: updates variable naming for directory file output * refactor: clean up ProtectedRoute and LoginContext (#431) * refactor: clean up ProtectedRoute and LoginContext * refactor: make LoginContext testable create 3 exports: LoginContext itself, LoginProvider, LoginConsumer * refactor: make route selector testable in App.jsx * refactor: group routing components * feat: add basic routing tests * refactor: move __tests__ folder to correct place Required for jest to find the test files * style: delete unnecessary div * refactor: make exports more obvious for LoginContext.js * refactor: delete duplicate route * chore: add rest of routing tests * style: remove unused declarations * Fix/fine-tune react-query settings (#389) * fix: turn off refetching on window focus for useQuery This commit sets the `refetchOnWindowFocus` flag for the useQuery on the following layouts/components to be `false`: - PageSettingsModal - EditNavBar - EditPage The reason we turn off this flag is because these pages involve user changes - with this flag on, any unsaved changes by the user would be overwritten by the refetched data. This commit also sets the - `refetchOnReconnect` - `refetchInterval` - `refetchIntervalInBackground` flags to be false for the same reasons explained above. * fix: invalidate queries after mutation This commit adds cache invalidation of all our GET queries (the useQuery invocations) after we perform a mutation. This allows us to reset our cache in a more granular manner, as opposed to simply setting the cache time for our GET queries to be 0. Additionally, this commit also adds a PAGE_SETTINGS_KEY constant to replace the string literal that was being used as the query key for the PageSettingsModal. Refer to the following documentation for more details: - https://react-query.tanstack.com/guides/query-invalidation - https://react-query.tanstack.com/guides/invalidations-from-mutations * feat: standardize output of GET API calls to return resp.data This commit standardizes the output of our GET API functions to return resp.data instead of just the response from the api call. resp.data is a better choice as we are able to use that in dependency arrays, whereas the resp object pointer always changes, which will trigger the useEffect every time even if the object data hasn't actually changed. * fix: load yaml content when reading directory file * feat: disable useQuery if component tracks local state As per our discussion (refer to meeting minutes here: https://docs.google.com/document/d/1br6T6wVX0KrcA3nwQEo7OhUrcT4veLnaz0vByEXjVvo/edit#heading=h.hyx8t36v9z3n) we will be discussing our `useQuery` functions if there are changes to the local state that are being tracked, to avoid refetching behavior from overwriting local changes. * fix: rebase errors * fix: invocation of LoginContext * Fix: rebase errors * Fix: update resource category and resource page get calls to return data directly * Refactor: use invalidateQueries instead of passing refetch function for CollectionPagesSection * Fix: error when retrieving page settings * Fix: rebase errors * Fix: invalidate query instead of reload when changing page settings * Feat: add success toast when changing settings * Fix: change folder naming to use invalidation instead of reload * Fix: invalidate correct resource folder key * Fix: update success toast messages * Fix: remove log statement * Fix: add successtoast Co-authored-by: Alexander Lee <alexander@open.gov.sg> * fix: pass parameters to wrapped components (#439) * fix: fixes toast popup on item select, folder deletion modal (#440) * fix: fixes toast popup on item select, folder deletion modal * fix: add condition for folder deletion Co-authored-by: kwajiehao <31984694+kwajiehao@users.noreply.github.com> Co-authored-by: jiehao <jiehao@open.gov.sg> Co-authored-by: Preston Lim <prestonlimlianjie@gmail.com> Co-authored-by: Alexander Lee <alexander@open.gov.sg> Co-authored-by: Alexander Lee <alexleegs@gmail.com>

bogdibota · 2021-06-22T08:21:17Z

Adding this

  "experimentalBabelParserPluginsList": [
    "jsx",
    "typescript"
  ]

to .prettierrc solved the issue for me

dweemx · 2021-11-10T11:10:00Z

Adding this,

module.exports = {
  importOrderParserPlugins: ["classProperties", "typescript", "jsx"],
};

to .prettier.config.js solved the issue for me

Version of @trivago/prettier-plugin-sort-imports is: 3.0.0

nirajhx · 2022-01-20T09:34:17Z

Still facing the same issue.
Using prettier 2.5.1 & 3.1.1 for prettier-plugin-sort-imports, when I run the prettier check, it prints:

[warn] Ignored unknown option { experimentalBabelParserPluginsList: ["classProperties", "jsx", "typescript"] }.

Its a NestJS + TS codebase

MoSattler · 2022-03-05T16:35:35Z

Same problem here as @nirajhx

SalahAdDin · 2022-12-14T12:26:59Z

Adding this,
module.exports = {
  importOrderParserPlugins: ["classProperties", "typescript", "jsx"],
};
to .prettier.config.js solved the issue for me

Version of @trivago/prettier-plugin-sort-imports is: 3.0.0

In my case it used this: "importOrderParserPlugins": ["importAssertions", "typescript", "jsx"],.

I was getting this error:

["ERROR" - 14:59:14] Error formatting document.
["ERROR" - 14:59:14] This experimental syntax requires enabling the parser plugin: "importAssertions". (3:42)
   1 | import { IUser } from "@domain/user.dto";
   2 | import { rest } from "msw";
   3 | import users from './entities/users.json' assert { type: 'json' };

So, thank you very much bro!

AcrylicShrimp · 2023-02-06T00:41:34Z

Ok, I'm using this plugin of version 4.0.0, and I solved this problem by adding below to .prettier.config.js.

"importOrderParserPlugins": ["decorators-legacy", "typescript", "jsx"]

psrok1 mentioned this issue Feb 9, 2021

Lint web code with Prettier CERT-Polska/mwdb-core#281

Merged

1 task

byara added the investigation label Mar 13, 2021

byara linked a pull request Mar 13, 2021 that will close this issue

Accept experimental plugin list #35

Merged

ayusharma closed this as completed in #35 Mar 15, 2021

This was referenced Mar 17, 2021

Bump @trivago/prettier-plugin-sort-imports from 2.0.0-0 to 2.0.1 yasuoza/homebridge-open-sesame#11

Merged

fix(deps): bump @trivago/prettier-plugin-sort-imports from 1.4.4 to 2.0.1 unipota/diary#72

Merged

prestonlimlianjie added a commit to isomerpages/isomercms-frontend that referenced this issue Apr 22, 2021

chore: upgrade prettier-plugin-sort-imports to 2.0.2

524c53d

fixes trivago/prettier-plugin-sort-imports#22

prestonlimlianjie added a commit to isomerpages/isomercms-frontend that referenced this issue Apr 22, 2021

chore: upgrade prettier-plugin-sort-imports to 2.0.2

3d25266

fixes trivago/prettier-plugin-sort-imports#22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (118:33) #22

SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (118:33) #22

jmls commented Dec 28, 2020

jennmueng commented Jan 9, 2021

levenleven commented Jan 19, 2021

robinzachmann commented Jan 20, 2021

jennmueng commented Jan 20, 2021 •

edited

Loading

levenleven commented Jan 20, 2021

gregkonush commented Feb 18, 2021

rek commented Mar 1, 2021 •

edited

Loading

byara commented Mar 16, 2021 •

edited

Loading

ziaulrehman40 commented Apr 22, 2021

bogdibota commented Jun 22, 2021

dweemx commented Nov 10, 2021 •

edited

Loading

nirajhx commented Jan 20, 2022

MoSattler commented Mar 5, 2022

SalahAdDin commented Dec 14, 2022

AcrylicShrimp commented Feb 6, 2023

SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (118:33) #22

SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (118:33) #22

Comments

jmls commented Dec 28, 2020

jennmueng commented Jan 9, 2021

levenleven commented Jan 19, 2021

robinzachmann commented Jan 20, 2021

jennmueng commented Jan 20, 2021 • edited Loading

levenleven commented Jan 20, 2021

gregkonush commented Feb 18, 2021

rek commented Mar 1, 2021 • edited Loading

byara commented Mar 16, 2021 • edited Loading

ziaulrehman40 commented Apr 22, 2021

bogdibota commented Jun 22, 2021

dweemx commented Nov 10, 2021 • edited Loading

nirajhx commented Jan 20, 2022

MoSattler commented Mar 5, 2022

SalahAdDin commented Dec 14, 2022

AcrylicShrimp commented Feb 6, 2023

jennmueng commented Jan 20, 2021 •

edited

Loading

rek commented Mar 1, 2021 •

edited

Loading

byara commented Mar 16, 2021 •

edited

Loading

dweemx commented Nov 10, 2021 •

edited

Loading