ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all #1560

KonradHoeffner · 2021-05-26T13:48:10Z

Describe the bug
I had the problem that my ESLint configuration throws errors on $lib/... imports so I created a new SvelteKit project to find out how that should be handled. However there I have the opposite problem that ESLint import checking is not working at all, as it doesn't even warn me when an import does not exist.

Logs and To Reproduce
There is no output from eslint even though 'thisdoesnot/exist.js' is not there and fails in the npm run dev step:

npm init svelte@next sveltetest
cd sveltetest
npm install
echo "<script>import doesnotexist from 'thisdoesnot/exist.js'</script>" >> src/routes/index.svelte
$ npm run lint      

> ~TODO~@0.0.1 lint
> prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .

Checking formatting...
[warn] package-lock.json
[warn] package.json
[warn] src/routes/index.svelte
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
sveltetest$ eslint --ignore-path .gitignore .

/tmp/sveltetest/src/routes/index.svelte
  3:16  warning  'doesnotexist' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

npm run dev -- --open
> ~TODO~@0.0.1 dev
> svelte-kit dev

  SvelteKit v1.0.0-next.109

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network

Failed to resolve import "thisdoesnot/exist.js" from "src/routes/index.svelte". Does the file exist?

Expected behavior

Correct imports should not be shown as errors, even if they contain $lib.
Incorrect imports should cause errors.
ESLint output should always be visible when calling npm run lint.

Information about your SvelteKit Installation:

Diagnostics

The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: Linux 5.12 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 7.21 GB / 15.42 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.2.0 - /usr/bin/node
    npm: 7.14.0 - /usr/bin/npm
  Browsers:
    Chromium: 90.0.4430.212
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.109 
    svelte: ^3.34.0 => 3.38.2

Your browser: Firefox 89
Your adapter (e.g. Node, static, Vercel, Begin, etc...): The default one from npm init svelte@next, maybe static?

Severity
It is not blocking but annoying.

Additional context
I think there are three issues relating to ESLint:

When using the SvelteKit default ESLint configuration, ESLint does not notice broken imports at all.
When using another ESLint configuration, such as the one from the SvelteKit repository, '$lib' errors that are correct cause errors by ESLint.
Even if ESLint notices any errors or warnings, npm run lint does not output them. I assume that prettier exits with an error code and stops the second part of the && from being executed.

The text was updated successfully, but these errors were encountered:

dummdidumm · 2021-05-26T14:27:38Z

Point 3 is "works as designed". Your assumption is correct, and if you want to change that, format the files first or switch the order of invocation.

justingolden21 · 2022-05-13T03:03:22Z

Is there any fix for this? All of my files are underlined in red with ESLint, and I'd rather not disable the entire rule checking unresolved imports. Would be awesome. Thanks 😄

iva2k · 2022-05-29T04:39:27Z

I added a bit of stuff to the setup to resolve the issue like this:

npm i -D eslint-plugin-import eslint-import-resolver-typescript
Add few lines to .eslintrc.cjs:

{
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
    'prettier'
  ],
  plugins: [
    ...
+    'import'
  ],
  settings: {
+    'import/resolver': {
+      typescript: {}
+    },
    ...
  },
  parserOptions: {
+    project: ['./tsconfig.json', './tsconfig.lint.json'],
+    tsconfigRootDir: './',
    ...
  }
}

Create file tsconfig.lint.json with:

{
  "extends": "./tsconfig.json",
  "include": ["./playwright.config.ts", "./svelte.config.js", "./tests/**/*.ts"]
}

Add few lines to tsconfig.json:

  "compilerOptions": {
    ...
+    "paths": {
+      "$app": ["./.svelte-kit/runtime/app"],
+      "$app/*": ["./.svelte-kit/runtime/app/*"],
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
  }
}

These changes fix the issue for me. I think those deserve to be added to svelte-kit templates.

stalkerg · 2022-08-19T12:58:38Z

Because now all load functions in separate js files it's very annoying!!!
@iva2k not working for me because I am not using TS.

Does somebody have a solution?

stalkerg · 2022-08-19T14:23:24Z

Okay, I solve it for ESLint by eslint-import-resolver-custom-alias plugin. This is my config:

    "settings": {
        "import/resolver": {
            "eslint-import-resolver-custom-alias": {
                "alias": {
                    "$lib":"./src/lib",
                    "$app":"./.svelte-kit/runtime/app",
                    "@sveltejs":"./.svelte-kit/dev"
                },
                "extensions": [".js"]
            },
        }
    },

I think we should have this in the default template.

stalkerg · 2023-04-27T12:56:11Z

@ota-meshi seems like eslint-plugin-svelte incompatible with eslint-import-resolver-custom-alias and I see next errors:

npx eslint src/lib/Image.svelte 

Error while parsing /home/stalkerg/projects/mjv-art.org/spa/src/lib/i18n.js
Line 15, column 0: Unexpected token
`parseForESLint` from parser `/home/stalkerg/projects/mjv-art.org/spa/node_modules/svelte-eslint-parser/lib/index.js` is invalid and will just be ignored

Error while parsing /home/stalkerg/projects/mjv-art.org/spa/src/lib/helpers.js
Line 3, column 14: Expected }
`parseForESLint` from parser `/home/stalkerg/projects/mjv-art.org/spa/node_modules/svelte-eslint-parser/lib/index.js` is invalid and will just be ignored

/home/stalkerg/projects/mjv-art.org/spa/src/lib/Image.svelte
  48:1  error  This line has a length of 101. Maximum allowed is 100  max-len

Basically, it's happened if I import such JS from .svelte

stalkerg · 2023-04-27T13:28:21Z

It seems like it will be good to write a new eslint-import-resolver- to support paths from jsconfig.json .
UPDATE it's exist https://www.npmjs.com/package/eslint-import-resolver-jsconfig ! I will check.
UPDATE2 it's not working as expected, but closer

stalkerg · 2023-04-28T11:08:26Z

Okey, seems like 'eslint-config-airbnb-base' for some reason breaks the default resolver.

stalkerg · 2023-04-28T12:37:46Z

Because new eslint-plugin-svelte using a ts parser inside, two rules from airbnb break it. It means we should disable it and add a new aliases, my new config works fine and looks like:

  "rules": {
    "import/named": "off",
    "import/no-cycle": "off"
  },
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "$lib": "src/lib",
          "$app": "node_modules/@sveltejs/kit/src/runtime/app",
          "@sveltejs/kit": "node_modules/@sveltejs/kit/src/exports/index.js"
        },
        "extensions": [
          ".js"
        ]
      }
    }
  }

it's of course it's addition to the default config from svelte-create and aribnb preset.

@dummdidumm can we add it in svelte-create? Also, I created a feature request here sveltejs/eslint-plugin-svelte#453

dummdidumm · 2023-04-28T12:45:18Z

Are these rules (import/..) enabled in the svelte-create setup? If yes, then it makes sense to me to add the rules adjustments, else not.

stalkerg · 2023-04-28T12:55:40Z

Are these rules (import/..) enabled in the svelte-create setup?

@dummdidumm As I can see, no, but it's not fair because the typescript setup does such a test by TS tools.
Our TS default setup validates imports, but our JS setup, even with ESLint, does not include the import plugin by default.

stalkerg · 2023-05-01T01:57:28Z

Okey, I should say thanks @ota-meshi he find a better setup:

  "import/parsers": {
      "svelte-eslint-parser": [".svelte"],
      "espree": [".js"]
  },
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "$lib": "src/lib",
          "$app": "node_modules/@sveltejs/kit/src/runtime/app",
          "@sveltejs/kit": "node_modules/@sveltejs/kit/src/exports/index.js"
        },
        "extensions": [
          ".js"
        ]
      }
    }
  }

basically, we need an extra parser if we want to use import plugin.

sveltejs/kit#1560

eltigerchino · 2024-11-14T03:03:38Z

Closing this because I can't seem to reproduce the issue with the latest SvelteKit. $lib aliases are correctly resolved by eslint without the custom alias resolver plugin.

KonradHoeffner changed the title ~~ESLint misses broken imports~~ ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all May 26, 2021

KonradHoeffner mentioned this issue Jun 30, 2021

ESLint errors from SvelteKit replacements IMISE/glossar#24

Closed

Rich-Harris added this to the whenever milestone Apr 23, 2022

iva2k mentioned this issue May 30, 2022

Missing types in @sveltejs/kit #5114

Closed

snyk-bot mentioned this issue Aug 1, 2022

[Snyk] Security upgrade node-fetch from 2.6.7 to 3.2.10 meatflavourdev/kit#2

Open

Metehan-Altuntekin mentioned this issue Feb 2, 2023

eslint-plugin-import issues working with Svelte cozemble/monorepo#36

Closed

kyoshino added a commit to sveltia/sveltia-ui that referenced this issue Jun 12, 2023

Solve ESLint parse error

3a6a2e9

sveltejs/kit#1560

eltigerchino closed this as not planned Won't fix, can't repro, duplicate, stale Nov 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all #1560

ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all #1560

KonradHoeffner commented May 26, 2021 •

edited

Loading

dummdidumm commented May 26, 2021

justingolden21 commented May 13, 2022 •

edited

Loading

iva2k commented May 29, 2022 •

edited

Loading

stalkerg commented Aug 19, 2022

stalkerg commented Aug 19, 2022

stalkerg commented Apr 27, 2023

stalkerg commented Apr 27, 2023 •

edited

Loading

stalkerg commented Apr 28, 2023

stalkerg commented Apr 28, 2023 •

edited

Loading

dummdidumm commented Apr 28, 2023

stalkerg commented Apr 28, 2023 •

edited

Loading

stalkerg commented May 1, 2023 •

edited

Loading

eltigerchino commented Nov 14, 2024

ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all #1560

ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all #1560

Comments

KonradHoeffner commented May 26, 2021 • edited Loading

dummdidumm commented May 26, 2021

justingolden21 commented May 13, 2022 • edited Loading

iva2k commented May 29, 2022 • edited Loading

stalkerg commented Aug 19, 2022

stalkerg commented Aug 19, 2022

stalkerg commented Apr 27, 2023

stalkerg commented Apr 27, 2023 • edited Loading

stalkerg commented Apr 28, 2023

stalkerg commented Apr 28, 2023 • edited Loading

dummdidumm commented Apr 28, 2023

stalkerg commented Apr 28, 2023 • edited Loading

stalkerg commented May 1, 2023 • edited Loading

eltigerchino commented Nov 14, 2024

KonradHoeffner commented May 26, 2021 •

edited

Loading

justingolden21 commented May 13, 2022 •

edited

Loading

iva2k commented May 29, 2022 •

edited

Loading

stalkerg commented Apr 27, 2023 •

edited

Loading

stalkerg commented Apr 28, 2023 •

edited

Loading

stalkerg commented Apr 28, 2023 •

edited

Loading

stalkerg commented May 1, 2023 •

edited

Loading