ESLint - import/no-unresolved while using wp-scripts lint-js

[RichForever]

Description

I'm working on Wordpress plugin that is using React on the admin area. When I'm trying to run npx wp-scripts lint-js command I'm getting errors error Unable to resolve path to module with type import/no-unresolved. Also in my vscode/windsurf, when I hover on import I have message with the same error

Step-by-step reproduction instructions

1. Create custom component inside directory src/components
2. Import it in other component
3. Run command for scripts lint

Screenshots, screen recording, code snippet

So, this is the sample

Sample.js

import CommonPanel from '@components/settings/common/CommonPanel';

eslintrc.js

module.exports = {
  root: true,
  extends: ['plugin:@wordpress/eslint-plugin/recommended']
};

jsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
	  "jsx": "react-jsx",
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "@styles/*": ["src/styles/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@config/*": ["src/config/*"],
    }
  },
  "include": ["src/**/*", "@types/**/*"],
  "exclude": ["node_modules", "build"],
}

webpack.config.js

const path = require('path');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
	...defaultConfig,
	entry: {
		...defaultConfig.entry(),
		app: './src/app.js'
	},
	resolve: {
		...defaultConfig.resolve,
		alias: {
			...defaultConfig.resolve.alias,
			'@styles': path.resolve(__dirname, 'src/styles'),
			'@components': path.resolve(__dirname, 'src/components'),
			'@hooks': path.resolve(__dirname, 'src/hooks'),
			'@config': path.resolve(__dirname, 'src/config')
		},
		extensions: [...(defaultConfig.resolve.extensions || []), '.scss']
	}
};

package.json

"dependencies": {
    "@codemirror/lang-html": "^6.4.9",
    "@uiw/react-codemirror": "^4.23.7",
    "@wordpress/api-fetch": "^7.14.0",
    "@wordpress/components": "^29.0.0",
    "@wordpress/element": "^6.14.0",
    "eslint-import-resolver-webpack": "^0.13.10",
    "react-hook-form": "^7.54.1"
  },
  "devDependencies": {
    "@wordpress/eslint-plugin": "^17.7.0",
    "@wordpress/scripts": "^30.6.0",
    "eslint-plugin-import": "^2.29.1",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.11",
    "prettier": "3.4.2"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:css:fix": "wp-scripts lint-style --fix",
    "lint:js": "wp-scripts lint-js",
    "lint:js:fix": "wp-scripts lint-js --fix",
    "lint:md:docs": "wp-scripts lint-md-docs",
    "lint:md:docs:fix": "wp-scripts lint-md-docs --fix",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "lint:pkg-json:fix": "wp-scripts lint-pkg-json --fix",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start",
    "prepare": "husky",
    "pretty": "npx prettier . --write"
  },

Environment info

Directory inside Ubuntu WSL

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

Hey @RichForever, Thanks for bringing this up.

The issue occurs because ESLint and Webpack handle path aliases differently. While you've configured path aliases in your webpack.config.js and jsconfig.json, ESLint has no way to understand these aliases without additional configuration.

To the best of my understanding, to fix this, you need to tell ESLint how to resolve these path aliases. Let me know if this works.