prettier-atom failed: ImportDeclaration should appear when the mode is ES6 and in the module context

[Fakkio]

After upgrading to version 0.39.0, saving a TypeScript file with some import, throws this error:

prettier-atom failed: ImportDeclaration should appear when the mode is ES6 and in the module context.

windows 10 pro - 1703 - 15063.608
atom: 1.20.0 x64
prettier-atom: 0.39.0

downgrading fix the issues.

Thanks,
Fakkio.

[robwise]

@Fakkio Can you try running prettier directly on the file and seeing if the same error occurs? I'm 90% sure this a prettier error and not a prettier-atom error.

[Fakkio]

Sure, i can i do that? Have i to install it with npm?

EDIT:

ok, i did it from cli and it went fine, no errors.

[DidierHoarau]

Hi,

I had the same error and the solution for me was to install eslint in the project.

Regards,

[mariuslundgard]

I’m having the same issue in a TypeScript repo. Would be great to not have to install eslint only to resolve this error.

[scttcper]

Also running into this on almost all of my typescript projects. No issue running prettier on file directly.

osx
atom 1.20.1
[email protected]

example repo: https://github.com/scttcper/ts-trueskill
clone repo and npm install, open src/trueskill.ts and run prettier format

[DidierHoarau]

Hi again,

My view on the issue:

For the projects I'm working on it's OK to install eslint. So... not having to install eslint would be the best... but if it's not easy/possible to have prettier-atom work without eslint, I think a good enough solution (for me) would be to have the error message explaining that we need to install eslint.

Regards

[robwise]

I'm a bit confused here. prettier-atom does not use or require eslint unless both of the following are true:

1. we detect that there is an eslint config file present
2. you have the ESLint Integration setting checked in your prettier-atom settings

If neither of these are true, then we are not doing anything with ESLint so I don't see why installing ESLint would fix?

If both of these are true, I think it's probably out of scope to be installing some arbitrary version of ESLint to use, as even minor differences in ESLint versions can result in huge numbers of errors (depending on the size of the project in question).

[darahak]

It could also come from typescript-eslint-parser which is a dependency of prettier.
Maybe an update would be enough to solve the issue?

[Fakkio]

@robwise can i help you identify the bug in some way? Maybe running Atom in developer mode or something like that?

[mlshv]

Logs in console say:

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: ~2.4.0

YOUR TYPESCRIPT VERSION: 2.5.2

Please only submit bug reports when using the officially supported version.

=============

So i guess it's a typescript-eslint-parser issue

...or maybe not...

[darahak]

Prettier support TS 2.5 as of version 1.6.0.
If you get this warning, you probably have an old version Prettier installed in your project.

https://github.com/prettier/prettier/releases

[DidierHoarau]

If neither of these are true, then we are not doing anything with ESLint so I don't see why installing ESLint would fix?

On my side, the 2 conditions that you have mentioned are true. (so expected behavior I guess)

The reason why I have .eslintrc on a TypeScript project is that I want prettier to format according to our coding standard.

We have a tslint file but Prettier can't use a tslint file as configuration fiile for prettier (as far as I know... but that would be great by the way)... so we use a .eslintrc file that replicate some of the rules we want for tslint so that prettier give us the right formatting.

Regards,

[robwise]

@DidierHoarau As of prettier 1.6 you can now use a prettier config file, so perhaps that might be useful to you?

@Fakkio I definitely want to help solve this if it is a prettier-atom issue. If you're using the ESLint integration, then as a test, you would need to run using prettier-eslint-cli and not prettier, and see if the error still happens.

Another thing is if you open the Atom developer tools, we should log the error with a more detailed stack trace. Can you reproduce that here?

[Fakkio]

here is the log copied from developer tools. It seems to be an eslint error, but i don't even use eslint in this project 😕

prettier-atom-error-stack-trace.txt

[robwise]

@Fakkio If prettier-atom is using prettier-eslint to format it means you've got both the ESLint Integration option checked and that your project has an eslint config in it.

[Fakkio]

The option is checked, but i have no eslint config file. I only have tslint.json for typescript.

[abhirathore2006]

@robwise thanks for pointing out the eslint integration checked
@Fakkio i don't use eslint and had the checkbox checked, removing the check from eslint integration fixed the issue for me.

[Fakkio]

@abhirathore2006 ok as temporary workaround, but in this way every time i pass from a project with eslint to a one without it, i have to remembre to check-uncheck that option. Not the end of the hello world, but quite annoyng.

[robwise]

Kent Dodds is somewhat moving away from maintaining prettier-eslint at this point, so I would recommend on those other projects using prettier-eslint-config to disable rules that conflict with prettier, and then only using prettier (no eslint) for formatting stuff.

[robwise]

I am going to close this for now, please let me know if there is still something that needs to be addressed and I will reopen.