`import/order` fixer breaks Svelte script imports

[ivanjonas]

This source:

<script lang="typescript">
    import { AlertTypes, icons } from "./alert-types";
    import Icon from "ui/library/components/icon/icon.svelte";

    export let type = AlertTypes.Info;
</script>

produces one warning on each of the import lines. The first line produces "There should be at least one empty line between import groups - eslint (import/order)" and the second line produces "ui/library/components/icon/icon.svelte import should occur before import of ./alert-types - eslint (import/order)".

Fixing the first warning works just fine. A newline is inserted between the imports:

<script lang="typescript">
    import { AlertTypes, icons } from "./alert-types";

    import Icon from "ui/library/components/icon/icon.svelte";

    export let type = AlertTypes.Info;
</script>

Unfortunately, fixing the remaining warning with ESLint results in this broken output:

<script lang="typescript">
    import { AlIcon from "ui/library/components/icon/icon.svelte";
import { AlertTypes, icons } from "./alert-types";


    export let type = AlertTypes.Info;
</script>

Note the double whitespace below the two imports.

Any idea what's going on? My goal is to get the autofix to correctly swap those two import lines and not break the source code.

[ivanjonas]

Additional info: the same issue does not happen with a plain TypeScript file.

import { icons } from "./alert-types";
import Icon from "ui/library/components/icon/icon.svelte";

const bob = Icon;
const tim = icons;

export { bob, tim };

The two import lines have the same warnings as in the original post above. I can fix them in any order and it does produce the expected result without breaking the source code. (The exports are just there to prevent "unused variable" warnings). Results after fixing are as expected:

import Icon from "ui/library/components/icon/icon.svelte";

import { icons } from "./alert-types";

const bob = Icon;
const tim = icons;

export { bob, tim };

[ljharb]

I'm not sure how you're linting TS or JS inside a script tag; linting is meant to run on standalone JS files only.

Can you help elaborate on this?

[ivanjonas]

Oh yes, it's no difficulty at all. In .eslintrc.js:

"use strict";

const aliases = require("./scripts/aliases.js");

module.exports = {
    extends : [...],

    env : { ... },

    rules : { ... },

    overrides : [
        // svelte components
        {
            files : [ "antechamber-ui/**/*.svelte" ],

            extends : [ "plugin:@typescript-eslint/recommended" ],

            processor : "svelte3/svelte3",

            env : { browser : true },

            plugins : [
                "html",
                "svelte3",
                "import",
                "@typescript-eslint",
            ],

            settings : {
                // pass the Typescript package to the svelte plugin/
                "svelte3/typescript" : require("typescript"),

                // Allow for eslint-plugin-import to understand our aliased module roots
                "import/resolver" : {
                    "./scripts/eslint/import-resolver.js" : { aliases },
                },

                // We ignore some warnings because we're bad people
                "svelte3/ignore-warnings" : require("./scripts/eslint/svelte3-warnings.js"),
            },

            parser        : "@typescript-eslint/parser",

            parserOptions : {
                ecmaVersion                 : 8,
                sourceType                  : "module",
                allowImportExportEverywhere : true,
            },

            rules : {
                // Svelte3 uses mutable exports to represent component props
                "import/no-mutable-exports"    : "off",
                "import/prefer-default-export" : "off",

                // Can't get eslint resolver to play nice with TS.
                // Turning this off so we can still have a linter in svelte files.
                "import/no-unresolved" : "off",

                // Exported component props should be at the top of the component
                "import/exports-last" : "off",

                // Exports can't be combined in svelte3
                "import/group-exports" : "off",

                // Freaks out with svelte3
                "import/first" : "off",

                // Disable due to let & reactive statements
                "newline-after-var" : "off",

                // Adjusting due to let & reactive statements
                "padding-line-between-statements" : [ "warn",
                    {
                        blankLine : "any", prev : "let", next : "*",
                    },
                ],
            },
        },
    ],
};

[ljharb]

ok, so it seems like the svelte "processor" might be running, i assume prior to the TS parser?

I think to fix this we'd have to be able to add test cases that use the svelte processor, so that we can reproduce the failure inside our test system - and then we could figure out why it's failing (presumably, AST node name mismatch, or, a bug in svelte).

[ivanjonas]

Sounds complicated. Is there anything I can do to help?

[ljharb]

lol yes, i think it will be complicated unfortunately - once this infra is set up ofc, then future svelte processor problems will be much easier to fix/debug.

Other than making a PR for that, or finding someone willing to do it, I'm not sure what can be done.

[ivanjonas]

Oh boy. I might just have to give up on getting this bug fixed. Thankfully, it's the sort of thing that, once fixed across the whole code base, won't cause too much trouble in the day-to-day. Another alternative we're going to consider is to pop that code out of the

[ljharb]

I’d probably suggest that anyways :-) that way it can be tested.

I’m happy to leave this open, though, because the bug should be fixed.

[Tofandel]

I'm having a similar issue with the vue ts processor, but not during fixing but during detection of errors

    'import/order': ['warn', {
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
      'newlines-between': 'always', // Caused by this option
    }],

<script setup lang="ts">
import { useForm } from '@inertiajs/inertia-vue3';
import { useI18n } from 'vue-i18n';

import ValidationError from '@/Components/ValidationError.vue';

// ....
</script>

False positive, because there is only one line, so how could there be newlines in the group

[ljharb]

@Tofandel are you sure it's not putting the third import in the same group as the second import?

[Tofandel]

@ljharb Yep I'm sure

It will also auto fix it, by adding a space in between but then the original error is still there, so I just removed 'newlines-between': 'always', don't know about the inner workings of the ts processor, is it maybe resolving this vue import as multiple imports? (One for template, one for script and one for style and eslint is running on this processed file?)

[ljharb]

Yes, that's possible. I'm not sure how the vue eslint parser handles that.

https://github.com/import-js/eslint-plugin-import/issues/2407#issuecomment-1075578624

Other than making a PR for that, or finding someone willing to do it, I'm not sure what can be done.

[callmeaponte]

FYI here's another instance where Svelte and this plugin don't play nicely together:

Before

<script context="module" lang="ts">
  import foo from "$lib/foo";
</script>
  
<script lang="ts">
  import bar from "@bar";
</script>

After

import bar from "@bar";
    import foo from "$lib/foo";
  
  

</script>

[ljharb]

@callmeaponte just like with vue, you'd need a svelte-specific eslint parser to be able to handle that.

[JounQin]

Use https://github.com/ota-meshi/eslint-plugin-svelte instead of hacky https://github.com/sveltejs/eslint-plugin-svelte.