Did not work until I imported the package somewhere

[juliushuck]

Before vite i used webpack, there the config like the following:

settings: { "import/resolver": { webpack: { config: "webpack.config.js" } } }

Now with this package it is like this:

settings: { "import/resolver": "vite" },

This looks a bit strange to me because it is using some kind of magic string there. Also, the short instructions did not mention that I have to import it somewhere like this:

import eslintViteImportResolver from "eslint-import-resolver-vite";

I did so in the .eslintrc.js

I do not know if other people had the same problem, but maybe put this in the README. And maybe think about the configuration again.

[pzmosquito]

a resolver can be referenced in several different ways. See here for docs.

# .eslintrc.yml
settings:
  # uses 'eslint-import-resolver-foo':
  import/resolver: foo

You don't need to import the resolver, eslint-plugin-import will take the resolver name to do its thing. Did you encounter errors when not importing the module?

[juliushuck]

Yes, it did not work, even after restarting VS Code. Also, when I remove the import, it stops working and eslint can not resolve any modules.

eslintrc.js with commented out import that does not work

``` js // import eslintViteImportResolver from "eslint-import-resolver-vite"; const eslintConfig = { env: { node: true }, parserOptions: { ecmaVersion: 2021, sourceType: "module", }, plugins: ["html", "json-format", "ordered-imports"], extends: ["airbnb-base", "plugin:ordered-imports/recommended", "prettier"], rules: { camelcase: 0, "eslintno-underscore-dangle": 0, "import/no-mutable-exports": 0, "import/order": 0, "import/prefer-default-export": 0, "new-cap": 0, "no-await-in-loop": 0, "no-console": process.env.NODE_ENV === "production" ? 2 : 0, "no-continue": 0, "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0, "object-curly-newline": [ 2, { ObjectExpression: { minProperties: 2 }, ObjectPattern: { minProperties: 2 }, ImportDeclaration: "never", ExportDeclaration: { minProperties: 2 }, }, ], "ordered-imports/ordered-imports": [ 2, { "group-ordering": [ { name: "root", match: "^@/", order: 20, }, { name: "current dir", match: "^\\./", order: 30, }, { name: "extermal", match: ".*", order: 10, }, ], }, ], }, settings: { "import/resolver": "vite" }, }; module.exports = eslintConfig; ```

vite.js with commented out import that does not work

``` js import path from "path"; import * as vite from "vite"; import { VitePluginNode as nodeVitePlugin } from "vite-plugin-node"; const viteConfig = vite.defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src") } }, plugins: [ ...nodeVitePlugin({ adapter: "koa", appPath: "./src/app.js", exportName: "app", }), ], server: { host: "0.0.0.0", port: 4000, }, }); export default viteConfig; ```

[pzmosquito]

can you try renaming your vite.js to vite.config.js? I created issue #2 to accept different vite config file name/path other than the default one. Currently the plugin assumes eslintrc file and vite.config.js file are in the same directory.

[juliushuck]

Sorry, yes it is already called vite.config.js 😕

[pzmosquito]

just looked at your vite config again, I don't see the eslint plugin. You need to configure vite to use eslint plugin. Try installing vite-plugin-eslint, The vite-plugin-eslint is not a dependency of this plugin, but it's needed for vite to use eslint. And also note that in your vite config, export a named config object viteConfig.

import eslintPlugin from "vite-plugin-eslint";

// named export only, not export default
export const viteConfig = defineConfig({
    plugins: [
        eslintPlugin()
    ],
});

// you can default export the same config object if you don't need further processing.
export default viteConfig;

I understand that the current configuration is very limited, I'm working on accepting more generic settings. I will push an updated version in a week or two.

UPDATE:

I published version 1.0.1 for more flexible configuration support. Please take a look at the README and give it a try. Thanks!

[juliushuck]

Mhh, didn't get it to work correctly. I created a minimal example: https://github.com/juliushuck/issue-eslint-import-resolver-vite Hope you can help me. It does show errors for the imports in index.jsx until I comment out the first line in eslint.config.js

[pzmosquito]

Thanks for the repo, I see where the problem is. I was using some syntax that is supported by Node version >= 14. When I try Node 12, it failed. When I switch to Node 14, I was able to compile and see your "Hello World" page. I'm going to make some update to support earlier Node versions. In the meantime, can you try updating your Node to >= 14 and see if that works for you?

[juliushuck]

I'm using Node v16.11.1 Are you using 17 or so?

[pzmosquito]

I was able to compile your sample app using Node 14.

I also made a quick fix, pushed 1.0.2, can you give it a try and see if that solves your problem?

[pzmosquito]

I also tried Node 16, it compiled fine.

[juliushuck]

Hi, compiling is not the problem, the linting in VS Code does not work until I add that import statement. I also tried the new version for that, still no luck.

[pzmosquito]

If the app compiles fine, that means the plugin is working properly. It's the vscode or its eslint plugin settings you should be looking at, not this plugin. I'm posting my set up for your reference. I'll close this issue since you confirmed your Vite is compiling correctly with this plugin.

[l0gicgate]

For anyone else looking for an answer on this, the root of the problem is the use of an inline require() inside of the exports.resolve function: https://github.com/pzmosquito/eslint-import-resolver-vite/blob/main/index.js#L25

This is required in order to read the Vite config file and read the alias and namedExport options so you don't have to maintain them in two places. Unfortunately eslint-module-utils now throws an error when using a dynamic require:

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\l0gicgate\Documents\vite-app\vite.config.js from C:\Users\l0gicgate\Documents\vite-app\node_modules\eslint-import-resolver-vite\index.js not supported.
Instead change the require of vite.config.js in C:\Users\l0gicgate\Documents\vite-app\node_modules\eslint-import-resolver-vite\index.js to a dynamic import() which is available in all CommonJS modules.

If you're looking for a quick solution just use the eslint-import-resolver-alias plugin.

The gotcha is that you will have to maintain your import aliases in two places (vite.config.js and eslint config file).

cc: @juliushuck

[pzmosquito]

@l0gicgate Thanks for the detailed explanation. Unfortunately the eslint-plugin-import resolver doesn't support dynamic import. This is also the reason why I have to use namedExport for Vite config as a function since Vite's ResolvedConfig interface is async.