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
- Create custom component inside directory src/components
- Import it in other component
- 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.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
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-jscommand I'm getting errorserror Unable to resolve path to modulewith typeimport/no-unresolved. Also in my vscode/windsurf, when I hover on import I have message with the same errorStep-by-step reproduction instructions
Screenshots, screen recording, code snippet
So, this is the sample
Sample.jseslintrc.jsjsconfig.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.jspackage.jsonEnvironment info
Directory inside Ubuntu WSL
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.