Skip to content

Error when formatting Svelte files with module script containing type declaration #145

Description

@soleuniverse101

Hi again! I have an issue that I think may be related to the prettier-plugin-svelte. I noticed in this repo's package.json that the dependency's version is 3.3.0, while in my project it's 4.1.1.

I'm not sure if updating prettier-plugin-svelte to its latest version is feasible, or if this would entail too much change in this plugin...

Dependency information

"prettier-plugin-classnames": "0.10.3",
"prettier-plugin-jsdoc": "^1.8.1",
"prettier-plugin-merge": "^0.10.1",
"prettier-plugin-organize-imports": "^4.3.0",
"prettier-plugin-svelte": "^4.1.1",
"prettier-plugin-tailwindcss": "^0.8.0",

Prettier configuration

{
  "useTabs": false,
  "singleQuote": false,
  "trailingComma": "none",
  "printWidth": 100,
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-jsdoc",
    "prettier-plugin-merge"
  ],
  "tailwindStylesheet": "./src/style/layout.css",

  "tsdoc": true,
  "jsdocDescriptionWithDot": true
}

Steps to reproduce

Format a Svelte file with the following code :

<script lang="ts" module>
  export type TabProps = {
    /** Use to lazily load elements in tab. */
    tabLoaded: boolean;
  };
</script>

<script lang="ts">
  import type { Snippet } from "svelte";

  interface Props {
    children?: Snippet;
    class?: string;
  }

  let { children, class: _class }: Props = $props();
</script>

<div class={["p-2 bg-primary-300 gap-2", _class]}>{@render children?.()}</div>

The current behavior

The following error is issued :

Error: Expected a valid element or component name. Components must have a valid variable name or dot notation expression
[error]     https://svelte.dev/e/tag_invalid_name
[error]       3 |     /** Use to lazily load elements in tab. */
[error]       4 |     tabLoaded: boolean;
[error]     > 5 |   };
[error]         |               ^^^^
[error]       6 | </script>

The expected behavior

To simply ignore this since it's not related to a class.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions