Webpack alias not working

[wenfangdu]

.eslintrc.js

const path = require('path')

module.exports = {
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['import'],
  root: true,
  rules: {
    'import/exports-last': 'warn',
    'import/extensions': ['warn', 'ignorePackages'],
    'import/first': 'warn',
    'import/newline-after-import': 'warn',
    'import/no-duplicates': 'error',
    'import/no-relative-parent-imports': 'warn',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            alias: {
              '@': path.resolve('src'),
            },
          },
        },
      },
    },
  },
}

package.json

    "eslint-import-resolver-webpack": "^0.12.2",
    "eslint-plugin-import": "^2.22.0",

Result

[ljharb]

Try adding node: {} after webpack: in the import/resolver settings?

[wenfangdu]

Seems like bug

  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src']],
        extensions: ['.js', '.jsx', '.vue'],
      },
    },
  },

eslint-plugin-import clearly knows my alias

Case 1

'import/extensions': ['warn', 'always'],

Case 2

'import/extensions': ['warn', 'ignorePackages'],

Case 3

[sethidden]

In Case 2 above (warning for '@/components/test' and no warning for @/util) there's an issue with the implementation of checking for scoped modules in the import/extensions rule.

Using the @ webpack alias (default in Vue projects) is the letter that also happens to be used by npm to mark scoped modules eg. @vue/cli. The problem is that eslint-plugin-import thinks @/util is a scoped module. I don't think scoped modules can start with @/, it has to be something like @anyTextHere/something

See https://github.com/benmosher/eslint-plugin-import/blob/master/src/rules/extensions.js#L132

 function isExternalRootModule(file) {
      const slashCount = file.split('/').length - 1

      if (isScopedModule(file) && slashCount <= 1) return true // <----------- problem here
      if (isExternalModule(file, context, resolve(file, context)) && !slashCount) return true
      return false
    }

and the isScopedModule implementation (https://github.com/benmosher/eslint-plugin-import/blob/master/src/core/importType.js#L95):

export function isScopedModule(name) {
  return name.indexOf('@') === 0
}

if(isScopedModule('@/util') && slashCount <= 1) is a false positive.

I think the implementation for isScopedModule should be return name.indexOf('@') === 0 && !name.startsWith('@/') and that'll do it

On the other hand @/util/blah is treated like a normal file because a scoped module probably can't have two slashes in npm

Run

git clone --single-branch --branch 3nuc/issue1 https://github.com/3nuc/demo-vue-eslint-force-dot-vue-extension-in-imports && cd demo-vue-eslint-force-dot-vue-extension-in-imports && npm ci && npm run lint

for repro (see /src/miscfile.js file)

[refanbanzhang]

extensions: ['.js', '.jsx', '.vue'],

    settings: {
        'import/resolver': {
            webpack: {
                config: {
                    resolve: {
                        alias: {
                            '@': path.resolve('src'),
                        },
                        extensions: ['.js', '.jsx'],
                    },
                },
            },
        },
    },

It's work for me!