Open rishavpandey43 opened 2 weeks ago
You do need those import/resolver settings.
Still, there is the same issue.
Btw in my standalone app, I needed settings for import/resolver
so that it identifies absolute import path definitions like @pay
.
In the standalone app, everything is perfect, even --fix is working for import/order but here its breaking.
What version of eslint and this plugin are you using?
It would be most helpful if you could create a minimal repro repo - I realize this is a tough ask.
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-redux": "^0.1.0",
"eslint-plugin-redux-saga": "^1.3.2",
"eslint-plugin-cypress": "^2.13.4",
"eslint-plugin-unused-imports": "^2.0.0",
I tried adding off
for a few rules 'import/namespace': 'off', 'import/default': 'off',
but then it's breaking for another one.
only import/order
is working.
Do I need to make extra changes since this is mono-repo?
I found these tips https://nx.dev/recipes/tips-n-tricks/eslint on nx, on how to use tsconfig.json
in eslint which is not commonly done in a standalone app, but even after this import plugin is breaking.
Also, I remembered, import/resolver
is necessary when creating path aliasing, Otherwise you will get error of Unable to resolve path to module '@pay/old/hooks/useGetConfig/useGetConfig'.eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/no-unresolved.md)
Let me try creating a test app, I'll have to create several dummy files/folders with code to ensure we solve the problem correctly.
Hi @ljharb
I tried creating a demo app for this but encountered a new issue of 1:24 error Unable to resolve path to module '@demo-org/ui-lib' import/no-unresolved
.
Unable to re-create the above main issue. I'll try and update soon.
I have successfully set the setting of import/resolver
as said in https://stackoverflow.com/a/55280867/7888165
This is a demo app - https://github.com/rishavpandey43/eslint-import-issue-check
Hey @ljharb
I guess I found something.
This time inside my apps/pay-platform/.eslintrc.js
I removed extending the global eslint config and put all the rules in a single file itself.
It works now.
This is the current value of apps/pay-platform/.eslintrc.js
-
const dotenv = require('dotenv');
dotenv.config();
module.exports = {
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
project: 'apps/pay-platform/tsconfig.*?.json',
},
plugins: [
'prettier',
'react',
'import',
'jsx-a11y',
'@typescript-eslint',
'graphql',
],
root: true,
ignorePatterns: [
'**/*.generated.tsx',
'**/*.generated.ts',
'**/*.coreTypes.ts',
'**/*.cmsTypes.ts',
],
// These rules are either not present in the plugins or have stricter settings than the default ones.
rules: {
// *** ESLint Recommended Rules with Stricter Settings ***
eqeqeq: 'error',
'array-callback-return': 'error',
'no-sequences': 'error',
'no-useless-concat': 'error',
'no-redeclare': 'error',
'no-lone-blocks': 'error',
'no-extra-boolean-cast': 'error',
'no-unexpected-multiline': 'error',
'no-var': 'error',
'prefer-spread': 'error',
'prefer-rest-params': 'error',
'no-console': ['error', { allow: ['warn', 'error'] }],
'max-lines': [
'off',
{ max: 500, skipComments: true, skipBlankLines: true },
],
// *** General JavaScript Rules ***
'no-template-curly-in-string': 'error',
'no-restricted-globals': 'error',
// *** React and JSX Rules ***
'react/react-in-jsx-scope': 'off',
'react/jsx-uses-react': 'off',
'react/prop-types': 'off',
'react/jsx-uses-vars': 'error',
'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
'react/display-name': 'off',
'react-hooks/exhaustive-deps': 'off',
'react/jsx-no-useless-fragment': 'error',
// *** TypeScript Rules ***
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
'@typescript-eslint/no-duplicate-enum-values': 'error',
'@typescript-eslint/await-thenable': 'error',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
},
],
// *** Import Rules ***
'import/no-named-as-default-member': 'error',
'import/no-named-as-default': 'error',
'import/no-duplicates': 'error',
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index',
],
pathGroups: [
{
pattern: '@pay/**',
group: 'internal',
position: 'before',
},
],
'newlines-between': 'always',
},
],
},
overrides: [
{
files: ['*.graphql'],
parser: '@graphql-eslint/eslint-plugin',
plugins: ['@graphql-eslint'],
rules: {
'@graphql-eslint/known-type-names': 'error',
'graphql/template-strings': 'error',
'@graphql-eslint/unique-operation-name': 'error',
'@graphql-eslint/no-unreachable-types': 'error',
},
parserOptions: {
schema: [
process.env.VITE_API_GRAPHQL_BASE_URL,
process.env.VITE_API_CMS_GRAPHQL_BASE_URL,
],
},
},
],
env: {
browser: true,
node: true,
},
settings: {
react: {
version: 'detect',
},
'import/resolver': {
typescript: {
alwaysTryTypes: true,
project: 'apps/pay-platform/tsconfig.*?.json',
},
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};
Earlier I tried to maintain one global .eslintrc.js
file which will hold generic rules applicable to all my internal apps and packages, and then project-specific rules in respective projects. But this is failing with eslint-plugin-import
plugin other rules were working fine.
But, now when I merged everything in a single internal app-level eslint config, things worked out.
Also, I tried creating an Nx-based monorepo but was unable to do. Encountering a lot of version mismatches, and even after that, the dummy project will not have that many files where imports are checked.
@rishavpandey43 does that mean you're using flat config, in eslint 8?
I have been encountering a weird issue.
I have a react+typescript based project it was working fine.
Now, I migrated everything to nx-based mono-repo, and I'm getting the following error -
These are imports in App.tsx -
This is my current eslintrc config the internal app-
apps/pay-platform/.eslintrc.js -
As soon as I comment on anything related to the import plugin, Eslint will break.
The same config was working fine in an earlier standalone project, but now it's failing.
This is root level eslint config -