Package breaks when using import assertions

[Csszabi98]

Your Environment

• Prettier version: 3.1.0
• node version 18.17.1
• package manager: [email protected]
• IDE: VSCode, CLI

Describe the bug

When running prettier against the import assertion syntax, (import X from 'y' assert { type: 'json' }) both using the new with and the deprecated assert keywords, the passing breaks for the given file.

This is especially problematic because newer node versions require the assertion to be present when running under esm otherwise the application will throw runtime exceptions, if not running through a bundler first ERR_IMPORT_ASSERTION_TYPE_MISSING.

To Reproduce

1. Open the reproduciton prettier-plugin-import-attributes-issue.zip
2. npm install && npm run prettier

Notes:

• Babel is properly set up in the example: .prettierrc.cjs

importOrderParserPlugins: [
    'typescript',
    'jsx',
    '["importAttributes", { "deprecatedAssertSyntax": true }]',
]

Expected behavior

Import assertions should not break the parsing.

Screenshots, code sample, etc

Configuration File (.prettier.cjs)

module.exports = {
  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
  arrowParens: 'always',
  bracketSameLine: false,
  bracketSpacing: true,
  importOrder: ['<THIRD_PARTY_MODULES>', '^@/(.*)$', '^[./]'],
  importOrderParserPlugins: [
    'typescript',
    'jsx',
    '["importAttributes", { "deprecatedAssertSyntax": true }]',
  ],
  importOrderGroupNamespaceSpecifiers: true,
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  quoteProps: 'as-needed',
  semi: true,
  singleAttributePerLine: true,
  singleQuote: true,
  trailingComma: 'all',
  vueIndentScriptAndStyle: false,
};

Error log

[error] src/main.ts: SyntaxError: ';' expected. (3:36)
[error]   1 | import { setupCounter } from './counter.ts';
[error]   2 | import './style.css';
[error] > 3 | import { test } from './test.json' assert { type: 'json' };
[error]     |                                    ^
[error]   4 | import typescriptLogo from './typescript.svg';
[error]   5 | import viteLogo from '/vite.svg';
[error]   6 |

[chentsulin]

After upgraded to prettier 3.1.1, the error message is changed from SyntaxError: ';' expected. to SyntaxError: '{' expected.

[chentsulin]

We need to allow passing the importAttributesKeyword option to babel-generator: https://github.com/trivago/prettier-plugin-sort-imports/blob/61d069711008c530f5a41ca4e254781abc5de358/src/utils/get-code-from-ast.ts#L51

If the importAttributesKeyword option is undefined, babel unexpectedly transforms with { type: 'json' } to with type: 'json' (with-legacy): https://github.com/babel/babel/blob/8fa2a916e0bb601e728c3d368c1e271763880f40/packages/babel-generator/src/generators/modules.ts#L102-L106

Ref: https://babeljs.io/docs/babel-generator

[chentsulin]

Another requirement is to bump @babel/generator to >=7.22.0: https://github.com/trivago/prettier-plugin-sort-imports/blob/61d069711008c530f5a41ca4e254781abc5de358/package.json#L36

Ref: https://github.com/babel/babel/releases/tag/v7.22.0

[JulianCataldo]

I have the same problem. I tried to fiddle but the Babel parser importAttributes isn't working, while importAssertions does work. That is a blocker, so I had to disable the plugin altogether, so I can still continue to format the document as needed.

[fisker]

You can use ["importAttributes", { deprecatedAssertSyntax: true }] to support both new and legacy syntax.

[vincerubinetti]

Is there any solution to this, even just a way to make a prettier lint check or in-IDE check not fail? I tried // prettier-ignore, // sort-imports-ignore, // @eslint-disable-next-line, using importAttributes vs importAssertions, with vs assert, nothing works.

I need to have this because I'm importing some JSON into a Playwright test and it can't handle it without the assert for some reason.

[MillerSvt]

You can use ["importAttributes", { deprecatedAssertSyntax: true }] to support both new and legacy syntax.

it is not working

[CHC383]

@ayusharma @byara Could someone please review https://github.com/trivago/prettier-plugin-sort-imports/pull/293 or https://github.com/trivago/prettier-plugin-sort-imports/pull/273?

[MillerSvt]

@CHC383 I think I'll post a fork if it's not reviewed this week.

[MillerSvt]

Sorry for the delay, you can use @miller-svt/[email protected] right now