Javascript: Collision with `import/extensions`

[tunnckoCore]

input

import utils from './lib/utils';
console.log(utils);

errors with Missing file extension for "./lib/utils" import/extensions

When set the file extension

import utils from './lib/utils.js';
console.log(utils);

errors with Unexpected use of file extension "js" for "./lib/utils.js" import/extensions

[tunnckoCore]

rules/imports.js#L132-L137 and rules/imports.js#L19-L22 - in one place they are required, in another are not, probably?

I believe that always should include extensions, because one they all these modules may be just used in browser without transpilation and such process. And i believe that browsers won't support such auto-guessing process.

edit: I don't think this would work?

// foo.js

<script type="module">
  import foo from './bar.js'
</script>

// bar.js

<script type="module">
  import qux from './qux'
  export default { qux }
</script>

// qux.js

<script type="module">
   export default () => 123
</script>

[ljharb]

All code should omit extensions always - this is a best practice, so that refactoring is enabled and "which extension" can be delegated to node, or a bundler.

https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/imports.js#L132-L137 says that extensions are always required, except for .js and .jsx files, for which it's always forbidden.

https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/imports.js#L19-L22 is a setting, not a rule - and it informs eslint-plugin-import that jsx is an extension it should look at.

I'm not sure what conflict you're talking about.

Re your example above, <script type="module"> can't appear in a JS file - and regardless, in node, .mjs will be the file extension required for ES Modules - so the fact that browsers can accept a .js file under type="module" is irrelevant.

I'll be updating the rules soon to also include mjs in the list of supported extensions, and configure it to always forbid the extension from being specified.

As far as your original example: if lib/utils.js exists, I'm not sure why the conflict occurs. Do you also have any other files in lib named utils, with any other extension?

[zidian257]

I had the same issue.

[steveja42]

I think I'm having the same issue. Chrome browser doesn't allow import without the extension. Example:
import { log, assert } from './utils';
results in error:
Failed to load resource: the server responded with a status of 404 (Not Found) [http://localhost:9000/utils]
but import { log, assert } from './utils.js'
works with no error.

[tunnckoCore]

@ljharb

Do you also have any other files in lib named utils, with any other extension?

No.

So long after this, I'm still with mixed feelings about required vs non-required extensions. Recently announced deno by Ryan is also forcing the use of extensions. Yea, I completely understand that it's totally another thing and it's not node, but still. It completely makes sense to force extensions.

Anyway, i didn't tried with latest updates and i think it would be resolved. I just was disabling the extensions rule. I'll make pure sample repo and report.

[tunnckoCore]

Not sure, but it seems it's working now. There is no collision.

I'll close for now.

[ljharb]

Glad it’s resolved.

deno was born from complaints about the very things that made node successful; the best practice of never including extensions is part of that.

[filetvignon]

This is happening to me right now.

import * as Page from 'components/page/index'; gives me "Missing file extension".
import * as Page from 'components/page/index.js'; gives me "Unexpected use of file extension "js"".

I have no idea what the fix is. Even using eslint rule config of 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', jsx: 'never', }, ] doesn't solve the problem. I have to set everything to "never" for this to get fixed.

[ljharb]

@filetvignon please upgrade to the latest eslint-plugin-import, and if that does not solve it, please file an issue on https://github.com/benmosher/eslint-plugin-import .

[filetvignon]

@filetvignon please upgrade to the latest eslint-plugin-import, and if that does not solve it, please file an issue on https://github.com/benmosher/eslint-plugin-import .

Updating eslint-plugin-import worked! Sorry for not trying it before 😅
Thanks for the quick response!

[Helias17]

I've solved this problem, when add to .eslintrc.yml next rule:
import/extensions: [0, { <js>: "always" }]

read more: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md