[BUG] unable to setup path aliases for JS project

[SalahAdDin]

We settled up a project using Vite + React.

Reproduction page: https://stackblitz.com/edit/github-p48qtqhd?file=src%2Fstories%2FPage.jsx

The project has path aliases properly defined:

/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
import path from "node:path";
import { fileURLToPath } from "node:url";
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
// ESM modules don’t define __dirname; derive it from import.meta.url
const dirname = path.dirname(fileURLToPath(import.meta.url));

// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
  plugins: [react()],
...
  resolve: {
    alias: {
      "@": path.resolve(dirname, "src"),
      "@assets": path.resolve(dirname, "src/assets"),
      "@components": path.resolve(dirname, "src/components"),
      "@hooks": path.resolve(dirname, "src/hooks"),
      "@pages": path.resolve(dirname, "src/pages"),
      "@styles": path.resolve(dirname, "src/styles"),
    },
  },
 ...
});

We settled up this project with this import package and we have no issues but the aliases one:

// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format

import js from "@eslint/js";
import globals from "globals";
import prettier from "eslint-config-prettier";
import { importX } from "eslint-plugin-import-x";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import { configs as sbConfigs } from "eslint-plugin-storybook";
import { defineConfig, globalIgnores } from "eslint/config";
import react from "eslint-plugin-react";
import vitest from "@vitest/eslint-plugin";

export default defineConfig(
  globalIgnores(["dist", "!.storybook"]),
  importX.flatConfigs.recommended,
  {
    files: ["**/*.{js,jsx}"],
    extends: [
      js.configs.recommended,
      react.configs.flat.recommended,
      react.configs.flat["jsx-runtime"],
      reactHooks.configs["recommended-latest"],
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    settings: {
      "import-x/resolver": {
        node: {
          extensions: [".js", ".jsx", ".ts", ".tsx"],
        },
      },
    },
    rules: {
      "no-unused-vars": [
        "error",
        {
          varsIgnorePattern: "^[A-Z_]",
          argsIgnorePattern: "^[A-Z_]",
        },
      ],
    },
  },
  {
    files: ["**/*.test.[tj]s?(x)"],
    ignores: ["**/*.e2e.test.[tj]s?(x)"],
    plugins: {
      vitest,
    },
    rules: {
      ...vitest.configs.recommended.rules,
      "vitest/no-importing-vitest-globals": "error",
    },
    languageOptions: {
      globals: {
        ...vitest.environments.env.globals,
      },
    },
  },
  sbConfigs["flat/recommended"],
  prettier
);

yarn run v1.22.22
$ eslint .
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/src/components/search/SearchBox.jsx
  4:31  error  Unable to resolve path to module '@hooks/useDebouncedValue'  import-x/no-unresolved
  5:26  error  Unable to resolve path to module '@hooks/useClickAway'       import-x/no-unresolved

✖ 2 problems (2 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

We got this from an example:

import js from "@eslint/js";
import globals from "globals";
import prettier from "eslint-config-prettier";
import { createNodeResolver, importX } from "eslint-plugin-import-x";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import { configs as sbConfigs } from "eslint-plugin-storybook";
import { defineConfig, globalIgnores } from "eslint/config";
import react from "eslint-plugin-react";
import vitest from "@vitest/eslint-plugin";
import path from "node:path";
import { fileURLToPath } from "node:url";

....

 settings: {
      "react": { version: "detect" },
      "import-x/resolver-next": [
        createNodeResolver({
          extensions: [".js", ".jsx", ".ts", ".tsx"],
          alias: [
            ["@", path.resolve(dirname, "src")],
            ["@assets", path.resolve(dirname, "src/assets")],
            ["@components", path.resolve(dirname, "src/components")],
            ["@hooks", path.resolve(dirname, "src/hooks")],
            ["@pages", path.resolve(dirname, "src/pages")],
            ["@styles", path.resolve(dirname, "src/styles")],
          ],
        }),
      ],
    },

But it does not solve the problem:

$ eslint .

/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/src/components/search/SearchBox.jsx
  4:31  error  Unable to resolve path to module '@hooks/useDebouncedValue'  import-x/no-unresolved
  5:26  error  Unable to resolve path to module '@hooks/useClickAway'       import-x/no-unresolved

✖ 2 problems (2 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

We tried with this setup, but it fails:

      "react": { version: "detect" },
      "import-x/resolver-next": [
        createNodeResolver({
          alias: {
            extensions: [".js", ".jsx", ".ts", ".tsx"],
            map: [
              ["@", "./src"],
              ["@assets", "./src/assets"],
              ["@components", "./src/components"],
              ["@hooks", "./src/hooks"],
              ["@pages", "./src/pages"],
              ["@styles", "./src/styles"],
            ],
          },
        }),
      ],
    },

Oops! Something went wrong! :(

ESLint: 9.37.0

Error: Failed to convert JavaScript value `Object ["@","./src"]` into rust type `String` on NapiResolveOptions.alias
    at createNodeResolver (file:///Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint-plugin-import-x/lib/node-resolver.js:5:22)
    at file:///Users/jose.sandoval/Projects/HugeInc/wtw-prototype/eslint.config.js?mtime=1762391128671:43:9
    at ModuleJob.run (node:internal/modules/esm/module_job:274:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
    at async dynamicImportConfig (/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint/lib/config/config-loader.js:186:17)
    at async loadConfigFile (/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint/lib/config/config-loader.js:276:9)
    at async ConfigLoader.calculateConfigArray (/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint/lib/config/config-loader.js:589:23)
    at async #calculateConfigArray (/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint/lib/config/config-loader.js:743:23)
    at async entryFilter (/Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/eslint/lib/eslint/eslint-helpers.js:322:5)
    at async NodeHfs.<anonymous> (file:///Users/jose.sandoval/Projects/HugeInc/wtw-prototype/node_modules/@humanfs/core/src/hfs.js:574:24)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

We find ways to do it with import plugin, but not with this one.

What is the proper way to put path aliases for this plugin?

[JounQin]

Please provide runnable reproduction repo instead.

[SalahAdDin]

Please provide a runnable reproduction repo instead.

Do we have any templates for it? Working on a private project.

[JounQin]

Nope, just create a new minimal project for reproduction.

[SalahAdDin]

Nope, just create a new minimal project for reproduction.

Done: https://stackblitz.com/edit/github-p48qtqhd?file=src%2Fstories%2FPage.jsx

[JerryJTJ]

I ran into this problem with my monorepo using pnpm workspaces and fixed it by adding all my tsconfig.json files to my resolver settings.

I also had some file path aliases in my tsconfig.json in one of my apps.

// eslint.config.mjs
settings: {
	"import-x/resolver-next": [
		createTypeScriptImportResolver({
			project: [
				"./tsconfig.json",
				"./frontend/tsconfig.json",
				"./backend/tsconfig.json",
				"./packages/schemas/tsconfig.json",
			],
			alwaysTryTypes: true,
			noWarnOnMultipleProjects: true,
		}),
	],
},

From first glance, it seems you're using createNodeResolver() but your issues are with your React app, so I would try using createTypeScriptImportResolver() and see if that fixes anything.

[SalahAdDin]

I ran into this problem with my monorepo using pnpm workspaces and fixed it by adding all my tsconfig.json files to my resolver settings.

I also had some file path aliases in my tsconfig.json in one of my apps.

// eslint.config.mjs
settings: {
"import-x/resolver-next": [
createTypeScriptImportResolver({
project: [
"./tsconfig.json",
"./frontend/tsconfig.json",
"./backend/tsconfig.json",
"./packages/schemas/tsconfig.json",
],
alwaysTryTypes: true,
noWarnOnMultipleProjects: true,
}),
],
},

From first glance, it seems you're using createNodeResolver() but your issues are with your React app, so I would try using createTypeScriptImportResolver() and see if that fixes anything.

We are not using TS in this project, that's the problem.