Comments (7)
"@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.
from eslint-plugin-import.
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
https://github.com/rishavpandey43/eslint-import-issue-check
from eslint-plugin-import.
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.
from eslint-plugin-import.
You do need those import/resolver settings.
from eslint-plugin-import.
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.
from eslint-plugin-import.
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.
from eslint-plugin-import.
@rishavpandey43 does that mean you're using flat config, in eslint 8?
from eslint-plugin-import.
Related Issues (20)
- ESLint: Parse errors in imported module 'foo': parserPath or languageOptions.parser is required! (undefined:undefined)(import/namespace) HOT 1
- fix long imports by exchanging with alias/paths from tsconfig HOT 1
- Unexpected token when running tests with nyc HOT 3
- arbitrary-module-namespace-identifier is showing an error in tests HOT 3
- import/no-unused-modules doesn't work in monorepo HOT 7
- `import/extensions`, `import/no-unresolved` don't highlight import of nonexistent .js in TypeScript project HOT 6
- Removing duplicates breaks in TypeScript when "type" is being used HOT 3
- `import/no-extraneous-dependencies` gets confused in a monorepo HOT 2
- Possible false positive import/namespace error on exported type HOT 5
- Error parsing git format in package.json (pnpm) HOT 6
- ESLint: (TypeError: context.getScope is not a function) HOT 1
- Status of upgrading to eslint v9? HOT 2
- TypeError: context.getScope is not a function HOT 1
- Require/first rule ? HOT 1
- createSSRApp not found in 'vue'eslintimport/named HOT 2
- This plugin does not report `import/extensions` and `import/no-unresolved` errors on `import type …` constructs HOT 3
- Making `ExportMap` available in `eslint-module-utils`?
- Update `tsconfig-paths` dependency to v4 HOT 1
- Regression in import/order rule after v2.26 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint-plugin-import.