Error: import sorting aborted due to babel parsing error.

[flawless-run]

Your Environment

• Prettier version: 3.5.1
• node version: 20
• package manager: [email protected]
• IDE: Cursor (VScode)

Describe the bug

it's giving me the following error for certain files in my repo: "import sorting aborted due to babel parsing error."

seems to be happening in files that have https://necord.org/ decorators.

Screenshots, code sample, etc

import { Injectable, Logger } from '@nestjs/common'
import { Context, ContextOf, On } from 'necord'

import { DiscordStatusService } from '#bot/services/status.service'

@Injectable()
export class ReadyEvent {
  private readonly logger = new Logger(ReadyEvent.name)

  constructor(private readonly statusService: DiscordStatusService) {}

  @On('ready')
  async execute(@Context() [client]: ContextOf<'ready'>) {
    this.logger.debug(`Bot logged in as ${client.user.username}`)

    this.statusService.start()
  }
}

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

module.exports = {
  plugins: [
    require.resolve('@ianvs/prettier-plugin-sort-imports'),
    require.resolve('prettier-plugin-tailwindcss'),
  ],
  importOrder: [
    '<TYPES>^(react/(.*)$)|^(react$)|^(react-native(.*)$)',
    '<TYPES>^(next/(.*)$)|^(next$)',
    '<TYPES>^(@nestjs/(.*)$)',
    '<TYPES>^(discord.js)',
    '<TYPES>',
    '',
    '^(react/(.*)$)|^(react$)|^(react-native(.*)$)',
    '^(next/(.*)$)|^(next$)',
    '^(@nestjs/(.*)$)',
    '^(discord.js)',
    'necord',
    '<THIRD_PARTY_MODULES>',
    '',
    '^@workspace/(.*)$',
    '',
    '^#(.*)$',
    '',
    '^[../]',
    '^[./]',
  ],
  importOrderParserPlugins: [
    'typescript',
    'jsx',
    'decorators-legacy',
    'classProperties',
    'exportDefaultFrom',
    'importAssertions',
  ],
  importOrderTypeScriptVersion: '5.0.0',
  singleQuote: true,
  semi: false,
}

Error log

apps/api/src/bot/commands/flex.command.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/commands/flex.command.ts 17ms (unchanged)
apps/api/src/bot/commands/index.ts 5ms (unchanged)
apps/api/src/bot/components/index.ts 6ms (unchanged)
apps/api/src/bot/components/tickets/close.button.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/components/tickets/close.button.ts 6ms (unchanged)
apps/api/src/bot/components/tickets/create.button.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/components/tickets/create.button.ts 8ms (unchanged)
apps/api/src/bot/components/tickets/reason.modal.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/components/tickets/reason.modal.ts 13ms (unchanged)
apps/api/src/bot/components/tickets/submit.button.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/components/tickets/submit.button.ts 6ms (unchanged)
apps/api/src/bot/constants/color.constants.ts 5ms (unchanged)
apps/api/src/bot/constants/guild.constants.ts 5ms (unchanged)
apps/api/src/bot/constants/image.constants.ts 5ms (unchanged)
apps/api/src/bot/constants/index.ts 5ms (unchanged)
apps/api/src/bot/constants/ticket.constants.ts 6ms (unchanged)
apps/api/src/bot/events/core/ready.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/events/core/ready.ts 7ms (unchanged)
apps/api/src/bot/events/index.ts 7ms (unchanged)
apps/api/src/bot/events/member/member.add.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/events/member/member.add.ts 9ms (unchanged)
apps/api/src/bot/events/member/member.remove.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/events/member/member.remove.ts 14ms (unchanged)
apps/api/src/bot/events/member/member.update.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.
apps/api/src/bot/events/member/member.update.ts 9ms (unchanged)
apps/api/src/bot/events/message/message.delete.ts [error] [prettier-plugin-sort-imports]: import sorting aborted due to babel parsing error.

[mrpinkcat]

Hello, same error here but only for .md files

[IanVS]

Hmmm, I don't use decorators, so I'm not sure exactly what babel parser plugin is needed. I see you have decorators-legacy, but have you tried decorators instead?

The list of all babel parser plugins is here: https://babeljs.io/docs/babel-parser#ecmascript-proposals

@mrpinkcat can you please open a separate issue with the details of the problems you are seeing?

[itsmepetrov]

I have similar problem but with .d.ts file:

declare module "color-temperature" {
  export type RGBColor = {
    red: number
    green: number
    blue: number
  }

  type ColorTemperature = {
    colorTemperature2rgb: (value: number) => RGBColor
  }

  const ct: ColorTemperature = {
    colorTemperature2rgb: () => {},
  }

  export default ct
}

looks like the issue with const declaration

[fbartho]

@itsmepetrov it looks to me like you're combining two operations:

• Defining types
• Setting a value. const ct = … {/* this is a value assignment, not a type-definition */}

I'm certain that defining types is fully handled by the TypeScript compiler, but I'm not sure if code is permitted in .d.ts files. I think declaring modules in non-.d.ts files is permitted to have code, if your runtime environment (or babel) allows it. But I don't think .d.ts is permitted to do that.

I would test:

-  const ct: ColorTemperature = {
-    colorTemperature2rgb: () => {},
-  }
+   const ct: ColorTemperature;

[IanVS]

Indeed, pasting the example code from @itsmepetrov into typescript playground gives several errors, including:

An implementation cannot be declared in ambient contexts.

Again, if you have an issue with babel parsing, please open a separate issue with the details, rather than jumping into this particular one. In nearly all cases, the issue is that your code is actually invalid, or you're missing the appropriate importOrderParserPlugins.

[flawless-run]

Hmmm, I don't use decorators, so I'm not sure exactly what babel parser plugin is needed. I see you have decorators-legacy, but have you tried decorators instead?

The list of all babel parser plugins is here: https://babeljs.io/docs/babel-parser#ecmascript-proposals

@mrpinkcat can you please open a separate issue with the details of the problems you are seeing?

hey, i tried using both decoratorAutoAccessors and decorators

the code is valid in my context, that's how you do it in Nest. though Typescript playground doesn't seem to like the @Context decorator.

it's not that big of a deal, but would be nice to find the underlying issue.

[IanVS]

@flawless-run would you be willing to put together a minimal reproduction that we can check out?

[flawless-run]

@flawless-run would you be willing to put together a minimal reproduction that we can check out?

yeah i can share a repo here soon

[flawless-run]

@IanVS here you go https://github.com/flawless-run/sort-imports

[gyenabubakar]

Any updates on this?

[IanVS]

I finally took a look into this. The problem seems to be the array destructuring in async execute(@Context() [client]: ContextOf<'ready'>) {

If I remove the brackets, and just make it async execute(@Context() client: ContextOf<'ready'>) {, it parses fine.

This is a limitation / bug in the babel parser. You can see this in the babel playground: link (you'll need to change the "Decorators version" to "Legacy")

I looked briefly, but couldn't find an existing issue reporting this problem, so if someone wants to report it to the babel project, that would be the next step. There's not really anything we can do from our end.

[IanVS]

Note, to work around this limitation, you should be able to refactor your code to avoid the array destructuring in the parameter. So something like:

@On('ready')
  async execute(@Context() ctx: ContextOf<'ready'>) {
    this.logger.debug(`Bot logged in as ${ctx.client.user.username}`)

    this.statusService.start()
  }

[aimerthyr]

importOrderParserPlugins: ['typescript', 'jsx', 'classProperties', 'decorators-legacy']

just set this config, can fix this problem