Error when importing .svelte files in .ts files

[vekunz]

Hi,

I am currently trying to migrate from eslint-plugin-svelte3 to eslint-plugin-svelte. Most things are working, but when I import a .svelte file from a .ts file (for example in unit tests), I get two errors from eslint-plugin-import (at least I think the errors comes from this plugin).

Error while parsing C:\pathToRepo\src\routes\Counter.svelte
Line 10, column 19: Unexpected token :
`parseForESLint` from parser `svelte-eslint-parser` is invalid and will just be ignored

and

C:\pathToRepo\svelte-eslint-import-error\src\routes\Counter.test.ts
  2:21  warning  Parse errors in imported module './Counter.svelte': parser.parse is not a function (undefined:undefined)  import/no-named-as-default

I created a reproduction repo https://github.com/vekunz/svelte-eslint-import-error. Probably I still have a configuration issue somewhere, but after several hours of reading documentation and GitHub Issues, I could not find any solution to this.

[ljharb]

That's expected since .svelte isn't a standard thing. You'll need to have an eslint-import resolver for svelte files (presumably you already have the TS resolver).

[vekunz]

OK, I thought that the svelte-eslint-parser is enougth.

    settings: {
        "import/resolver": {
            node: {},
            typescript: {
                alwaysTryTypes: false
            }
        },
        "import/parsers": {
            "svelte-eslint-parser": [".svelte"],
            "@typescript-eslint/parser": [".ts"],
            "espree": [".js"]
        }
    }

Do you know if there is any import resolver for svelte?

[ljharb]

Not that I'm aware of. Does https://github.com/import-js/eslint-plugin-import/issues/2407#issuecomment-1223394415 help?

[vekunz]

The recommendation there is to use eslint-plugin-svelte instead of the old eslint-plugin-svelte3, but I am already using the new plugin.

I remembered that eslint-plugin-import has an ignore-setting. With this option, ESLint at least doesn't show these errors, but the rest of ESLint seems to work.

  settings: {
    ...
    "import/ignore": [
      "\\.svelte$"
    ]
  }

[ljharb]

Until there's a resolver, that might be your only option.

[fehnomenal]

I have the same problem. svelte-plugin-eslint for typescript ist configured like this:

  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
      },
    },
  ],

To be able to import svelte files from js/ts we also need:

  settings: {
    'import/parsers': {
      'svelte-eslint-parser': ['.svelte'],
    },
  },

But I guess here the parserOptions.parser for typescript is missing.

EDIT:

My guess seems to be correct. The problem goes away after adding

  if (parserOrPath === 'svelte-eslint-parser') {
    parserOptions.parser = '@typescript-eslint/parser'
  }

somewhere in between https://github.com/import-js/eslint-plugin-import/blob/da71746147450a5b7eeeaca77efc521125d91d41/utils/parse.js#L64-L78

Of course hard coding this is not the final solution. I think the plugin should take the overrides section into account. I will try to get a PR ready.

[ljharb]

eslint merges overrides; plugins don’t ever consider it.

[ljharb]

ah but we’re not getting the config for other files perhaps? I’ll be interested to review your pr.

[nonameolsson]

What is the current status of this? 🙂

[niemyjski]

Also running into this.

[insilications]

Any solution?

[JounQin]

PR is always better than comments.

[vekunz]

We have this ESlint configuration, and this "works" (in the sense that we don't get errors).

{
  "settings": {
    "import/resolver": {
      "node": {},
      "typescript": {
        "alwaysTryTypes": false
      }
    },
    "import/parsers": {
      "svelte-eslint-parser": [".svelte"],
      "@typescript-eslint/parser": [".ts"],
      "espree": [".js"]
    },
    "import/ignore": [
      "\\.svelte$"
    ]
  }
}

[insilications]

We have this ESlint configuration, and this "works" (in the sense that we don't get errors).

{
  "settings": {
    "import/resolver": {
      "node": {},
      "typescript": {
        "alwaysTryTypes": false
      }
    },
    "import/parsers": {
      "svelte-eslint-parser": [".svelte"],
      "@typescript-eslint/parser": [".ts"],
      "espree": [".js"]
    },
    "import/ignore": [
      "\\.svelte$"
    ]
  }
}

Thanks! This works for now.

[niemyjski]

Svelte support is really lacking especially with import aliases.

[ljharb]

@niemyjski https://github.com/import-js/eslint-plugin-import/issues/2837#issuecomment-1646122243