import statement without `.mjs` file extension causes linter errors

[frankthelen]

Hi! I have a simple ESM module file test.mjs with this content:

export const bla = 'blub';
export default {
  test: true,
};

And a file index.mjs that loads the module like this:

import test, { bla } from './test';

ESLint will produce the following errors:

• Unable to resolve path to module './test' (import/no-unresolved)
• Missing file extension for "./test" (import/extensions)

Loading the module with file extension fixes the errors:

import test, { bla } from './test.mjs';

However, omitting the file extension remains best practice, as far as I know.

I am using Node 8.6.0 (with --experimental-modules to run ESM), eslint 4.8.0 and eslint-plugin-import 2.7.0.

I tried the following tweaks in .eslintrc:

• rule "import/extensions": [2, { "js": "never", "json": "always", "mjs": "never" }] prevents the import/extensions error -- which is good
• setting "import/extensions": [".js", ".mjs"] does not help, the error import/no-unresolved remains

Thank you.

[such]

it works with:

"import/extensions": [
  "error",
  "always",
  {
    "js": "never",
    "jsx": "never",
    "mjs": "never"
  }
]

[maxmilton]

Same situation here. In my .eslintrc.js I have basically the same thing:

'import/extensions': ['error', 'always', {
  js: 'never',
  mjs: 'never',
}],

... but get the same 2 errors, "unable to resolve path to module" and "missing file extention".

[such]

@MaxMilton my guess is, once the module will be resolved, if it has the .mjs (or js) extension the other error will disappear.

[benmosher]

The Node resolver is not (yet) configured by default to look for .mjs, try the following:

// .eslintrc.js
exports.settings = {
  "import/resolver": {
    node: { extensions: [ .js, .mjs ] }
  }
}

Is .mjs canonized by a particular node version? I'm guessing it wouldn't hurt to add it as a default, but would love a link to Node docs stating that .mjs is valid/preferred.

[maxmilton]

@benmosher that fixes the problem! Thank you!

I tried tweaking the settings but somehow wasn't able to come to that... seams simple enought though in hindsight. The documentation was a bit sparse around this.

FYI for anyone in the future, this is what I used to resolve my issue:

module.exports = {
  settings: {
    'import/resolver': {
      node: { extensions: ['.js', '.mjs'] }
    }
  },
  rules: {
    'import/extensions': ['error', 'always', {
      js: 'never',
      mjs: 'never',
    }],
  }
}

[ljharb]

@benmosher it's behind a flag in node 8.5+; altho it's technically "experimental", it's not going to change much - mjs is the way forward.