Prettier error: `Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?`

[marekdedic]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.23.1

What version of eslint-plugin-svelte are you using?

2.8.0

What did you do?

Configuration

module.exports = {
  parserOptions: {
    parser: "@typescript-eslint/parser",
    project: "./tsconfig.json",
    sourceType: "script",
    extraFileExtensions: [".svelte"],
  },
  env: {
    browser: true,
    node: false,
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:svelte/recommended",
    "plugin:prettier/recommended",
    "plugin:svelte/prettier",
  ],
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser",
      },
    },
  ],
};

<h2>
  {$_("steps." + step + ".header")}
</h2>

<script lang="ts">
  import {_} from "svelte-i18n";

  export let step: string;
</script>

<style lang="scss">
  @import "@material/typography/mdc-typography";
</style>

What did you expect to happen?

No prettier error

What actually happened?

I got Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? error from eslint-plugin-prettier

Link to Minimal Reproducible Example

I can't get eslint-plugin-prettier running in your playground. For a (non-minimal) repro, see skaut/shared-drive-mover@563b5a9

Additional comments

No response

[JounQin]

Did you try prettier-plugin-svelte at the same time? Without it, prettier will not recognize .svelte correctly, and eslint-plugin-svelte will just fallback it as JS (babel parser for prettier).

And I don't think that's a minimal reproduction, can you please try to provide another smaller one?

[JounQin]

Please install prettier-plugin-svelte first.

Maybe you want a custom prettier configuration according to your .svelte files:

// .prettierrc
{
  "svelteSortOrder": "options-markup-scripts-styles"
}

[marekdedic]

Oh, thank you very much! Would you maybe consider adding such a note to the docs - in the place where you talk about the preset plugin:svelte/prettier? I somehow though by using that, everything would be taken care for... Thanks!

[JounQin]

Oh, thank you very much! Would you maybe consider adding such a note to the docs - in the place where you talk about the preset plugin:svelte/prettier? I somehow though by using that, everything would be taken care for... Thanks!

@marekdedic

We do have a list item mentions:

plugin:svelte/prettier... Turn off rules that may conflict with Prettier (prettier-plugin-svelte).

But I agree we can document it better, please feel free to draft a PR for it from your view!

[ddanielou]

Hey, thanks for this. For anyone searching through the issues, this solved two other parsing issues I faced:

<script lang="ts" context="module">
// anything typescript gives squiggly red lines
</script>

and

import type { Readable } from "svelte/store"; // squiggly red lines

Since prettier-plugin-svelte comes by default with the official vscode svelte extension, the plugin:svelte/prettier rule should indeed maybe get a special mention in the docs?

[bbugh]

Hi 👋🏻 I'm having this issue but the above comments that suggest how to resolve it do not appear to work.

This is a fresh vite svelte-ts template, you can find it here: https://github.com/bbugh/error-eslint-plugin-svelte-prettier

Just clone and run pnpm lint and you'll see:

/app/svelte/first-app/src/App.svelte
  6:2  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?  prettier/prettier

/app/svelte/first-app/src/lib/Counter.svelte
  2:7  error  Type number trivially inferred from a number literal, remove type annotation                                     @typescript-eslint/no-inferrable-types
  8:2  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?  prettier/prettier

/app/svelte/first-app/src/main.ts
  1:8   error  Replace `'./app.css'` with `"./app.css";`        prettier/prettier
  2:17  error  Replace `'./App.svelte'` with `"./App.svelte";`  prettier/prettier
  5:35  error  Replace `'app')` with `"app"),`                  prettier/prettier
  6:3   error  Insert `;`                                       prettier/prettier
  8:19  error  Insert `;`                                       prettier/prettier

✖ 8 problems (8 errors, 0 warnings)
  6 errors and 0 warnings potentially fixable with the `--fix` option.

As of 4.2.0 eslint-plugin-prettier supports svelte natively, so it should no longer be necessary to install prettier-plugin-svelte, but I did anyway as part of testing, and it still gives this error.

  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.2",
    "@tsconfig/svelte": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^5.38.1",
    "@typescript-eslint/parser": "^5.38.1",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-svelte": "^2.9.0",
    "prettier": "^2.7.1",
    "prettier-plugin-svelte": "^2.7.1",
    "svelte": "^3.49.0",
    "svelte-check": "^2.8.1",
    "svelte-preprocess": "^4.10.7",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0"
  }

/app/src/App.svelte
  6:2  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?  prettier/prettier

// .eslintrc.cjs
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    extraFileExtensions: [".svelte"]
  },
  plugins: ["@typescript-eslint", "prettier"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:svelte/recommended",
    "plugin:prettier/recommended",
    "plugin:svelte/prettier"
  ],
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser"
      },
    },
  ]
}

[ota-meshi]

prettier-plugin-svelte doesn't seem to work well with pnpm, so I think you need to do a workaround.
sveltejs/prettier-plugin-svelte#155

[bbugh]

What the holy hell?! I would have never guessed that. I used pnpm all the time and haven't had an issue, but it looks like it's common. I guess I haven't used it in the circumstances for having a prettier plugin...?!

Thank you for the info (and this great package)!

I went through all of the different options, and the minimal fix that worked for both the cli and vscode was to add this to .prettierrc:

{
  "plugins": ["prettier-plugin-svelte"]
}