Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Package breaks when using import assertions #270

Open
Csszabi98 opened this issue Nov 21, 2023 · 7 comments · May be fixed by #273 or #293
Open

Package breaks when using import assertions #270

Csszabi98 opened this issue Nov 21, 2023 · 7 comments · May be fixed by #273 or #293
Labels
investigation

Comments

@Csszabi98
Copy link

Your Environment

  • Prettier version: 3.1.0
  • node version 18.17.1
  • package manager: npm@9.6.7
  • 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

image

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
Copy link

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

@chentsulin
Copy link

We need to allow passing the importAttributesKeyword option to babel-generator:

prettier-plugin-sort-imports/src/utils/get-code-from-ast.ts

Line 51 in 61d0697

const { code } = generate(newAST);

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
Copy link

Another requirement is to bump @babel/generator to >=7.22.0:

prettier-plugin-sort-imports/package.json

Line 36 in 61d0697

"@babel/generator": "7.17.7",

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

@chentsulin chentsulin linked a pull request Dec 12, 2023 that will close this issue
Open
1 task
raineorshine added a commit to raineorshine/npm-check-updates that referenced this issue Dec 18, 2023
@raineorshine
cli: Switch from import json to fs.readFile.
5ef47d4 
@trivago/prettier-plugin-sort-imports does not yet support import assertions.

See: trivago/prettier-plugin-sort-imports#270
@JulianCataldo
Copy link

JulianCataldo commented Feb 4, 2024 •
edited

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
Copy link

fisker commented Feb 6, 2024

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

@jthrilly jthrilly mentioned this issue Mar 4, 2024
Closed
@vincerubinetti
Copy link

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.

This was referenced Mar 4, 2024
Open
Merged
@louis-bompart louis-bompart mentioned this issue Mar 8, 2024
Merged
@jycouet jycouet mentioned this issue Mar 14, 2024
Open
@MillerSvt
Copy link

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

it is not working

@MillerSvt MillerSvt linked a pull request Apr 29, 2024 that will close this issue
Open
@jhnns jhnns mentioned this issue Apr 29, 2024
Open
@jase88 jase88 mentioned this issue May 13, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
investigation
Projects
None yet
Milestone
No milestone
6 participants
@fisker @JulianCataldo @chentsulin @vincerubinetti @Csszabi98 @MillerSvt