question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Don't get import/order to work correctly with import aliases

See original GitHub issue

No matter what I try, I don’t get the import/order plugin to work as expected.

These are the imports, and they are already ordered as expected:

import classNames from 'classnames';
import * as React from 'react';

import { I18N } from '@context/i18n';
import { SVGIcon } from '@ui';
import * as Utils from '@utils';

import * as styles from './styles.scss';

Anyhow, the rule complains about:

classnames import should occur after import of @utils react import should occur after import of @utils

classnames and react are located in node_modules Everything starting with @ indicates an import alias (so I assume they should be interpreted as internal).

My eslint configuration looks like this:

{
	settings: {
		'import/parsers': {
			'@typescript-eslint/parser': ['.ts', '.tsx']
		},
		'import/internal-regex': '^@'
	},
	rules:  {
		'import/order': ['error', {
			'alphabetize': { order: 'asc', caseInsensitive: true },
			'groups': ['builtin', 'unknown', 'external', 'internal', 'parent', 'sibling', 'index'],
			'newlines-between': 'always'
		}]
	}
}

I’ve played around since multiple hours now, but don’t get the expected result. The only thing which happens is, that it sometimes say that @utils should occur before classnames, and sometimes it says classnames should occur after @utils

What have I missed?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

45reactions
rypricecommented, Apr 4, 2020

I did a bit of debugging and figured out that, at least in my case, imports for ququmber-ui (the local package) are being skipped because ququmber-ui is considered external and pathGroupsExcludedImportTypes defaults to ["builtin", "external"].

My fix "pathGroupsExcludedImportTypes": [] Hope this helps you @jens-duttke.

2reactions
jens-duttkecommented, Mar 18, 2020

I don’t import/require npm packages starting with an @, so there is no collision. Beside that, I’ve just tested to replace @ by ~ (which is not a valid character in npm package names), but the exact same problem still occurs:

classnames import should occur after import of ~utils [Error/import/order] react import should occur after import of ~utils [Error/import/order]

Read more comments on GitHub >

github_iconTop Results From Across the Web

eslint import/order breaks down when using typescript aliases
I followed some tips at Don't get import/order to work correctly with import aliases, but this seems to be the last hurdle. We...
Read more >
useless-import-alias / C0414 - Pylint 2.16.0-dev documentation
Import alias does not rename original package. Description: Used when an import alias is same as original package, e.g., using import numpy as...
Read more >
Module Resolution or Import Alias: The Final Guide - Raul Melo
Tired to have weird imports? It's time to learn how can you enable aliases to your imports and let code more organized.
Read more >
Imports - checkstyle
Checks that there are no import statements that use the ... All messages can be customized if the default message doesn't suit you....
Read more >
Auto import | IntelliJ IDEA Documentation - JetBrains
Basic procedures to create and optimize imports in IntelliJ IDEA. ... prompting to add a missing import statement so that you don't have...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found