Eslint-plugin-import: import/extensions breaks when a scoped package's scope is just `@`

[jtsom]

In a Vue application, using version with packages:

    "eslint": "^5.2.0",
    "eslint-config-airbnb-base": "^13.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-vue": "^5.2.3",

and an eslint.js of:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
    'padded-blocks': 0,
    'no-param-reassign': 0,
    'import/no-unresolved': 0,
    'import/prefer-default-export': 0,
    'max-len': 0,
    'object-curly-newline': ['error', { ObjectPattern: 'never' }],
    // 'vue/html-closing-bracket-newline': ['error', {
    //   singleline: 'never',
    //   multiline: 'never',
    // }],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

In a .vue file, when trying to do an import of a .js file, the eslint plugin can't decide if the .js extension is needed or not:
This:
import router from '@/router';
shows:
Missing file extension for "@/router"
If I change it to:
import router from '@/router.js';
I now get:
Unexpected use of file extension "js" for "@/router.js"

So which do you want?!?

FYI, the jsconfig.json is:

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

[ljharb]

@/ might be causing confusion; what happens if you temporarily switch it to @x/ or similar?

[jtsom]

Yeah, that seems to be an issue - If I change it to '../router', there is no error (If I use '../router.js', I get the "unexpected use of js" message)

Not sure if a newer version would help, I hesitate to update, as there were issues with using the latest eslint / eslint-plugins and airbnb eslint plugins with Vue.

Thanks.

[ljharb]

It's possible - there's unreleased stuff on master - but it's also possible that nobody expected an @ by itself (since usually @ denotes a scope, which is always nonempty)

[jtsom]

Ohhh I see what you mean by "@x"...

I do have a lot of imports with just the @ - import Feedback from '@/views/Feedback.vue'; and that does not have an issue. If I change the jsconfig.json to be @src/*. ... and use that, it does seem to help out, but I'd have to change lots of code, and as far as I recall, that was an OK pattern (at least with Vue). But I guess I'll do what I must?

[jtsom]

It's happening on other files too, and give errors when I build my vue app. As far as I see, using the @/ is normal for a vue application

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Missing file extension for "@/router" (import/extensions) at src/components/ActivityHeader.vue:24:20:
  22 | 
  23 | <script>
> 24 | import router from '@/router';
     | 

[ljharb]

Oh I wasn't suggesting permanently changing everything :-) just trying it out on one file to see if the problem you're reporting goes away.

[jtsom]

I ended up adding a rule to my eslint.js file to basically ignore it..

[ljharb]

I’d appreciate it if you could try my suggestion; that would help make it an easy fix to help you, or anyone else with the same problem in the future.

[jtsom]

Oh sorry, thought I had mentioned it. When I did change it to be in the format of '@src/feedback', it seem to do the right thing (opposed to keep suggesting the opposite ("add a .js", or "missing .js")

[ljharb]

Great, thanks - that makes it straightforward to fix.

[wintercounter]

I had the same issue even tho I had import/extensions: 0. Changed to never, it's fine again.

[yordis]

@ljharb since you added help wanted tag. How can I help you? Do you have any suggestions or ideas on how to fix this?

[yordis]

Based on this, https://github.com/benmosher/eslint-plugin-import/blob/b4d5fd38a29073e273523e262d7d59a7c48e30fe/src/rules/extensions.js#L114

Which it does a look up on patterns https://github.com/benmosher/eslint-plugin-import/blob/b4d5fd38a29073e273523e262d7d59a7c48e30fe/src/rules/extensions.js#L110

It doesn't work for use since extension is an empty string, so I am not sure what would be the fix for this issue in terms of direction

Data input:

{ extension: '', importPath: '@/utils/i18n' }

[ljharb]

@yordis in general that label means "please submit a PR that takes care of this" :-)

If that ends up with an answer of "configure it with an empty string for extension" then fine, but the issue i thought was that the "is scope" logic is not considering a scope of "@"

[yordis]

@ljharb would you mind helping to understand why is that scope thing important? I am guessing you are talking about https://github.com/benmosher/eslint-plugin-import/blob/b4d5fd38a29073e273523e262d7d59a7c48e30fe/src/core/importType.js#L53

[ljharb]

yes - i believe changing that regex from /^@[^/]+\/?[^/]+/ to /^@[^/]*\/?[^/]+/ should fix the issue.

[yordis]

@ljharb confirmed, it fixes the issue

[yordis]

@ljharb is there any possibility to release the changes to NPM sooner? 🙏

[ljharb]

Sooner than when?

I just released v2.20.1, so let's call it "sooner than tomorrow", and yes :-p

[yordis]

@ljharb 😢 I forgot to finish the sentences 😭 English is hard

Thanks a lot! Appreciated it.

[jtsom]

So far, this version looks like it's fixed the issue. I'll do some more testing but 👍