ESLint import plugin not finding Quasar aliased imports

[dsl101]

I’m making use of the Quasar webpack aliases to do things like this:

import Thing from 'components/Thing'

but ESLint’s import plugin is complaining that it can’t resolve path to the module. I believe part of the answer is to use eslint-import-resolver-webpack, but I’ve tried naively adding it as a dev dependency, and putting this into .eslintrc.js:

  'settings': {
    'import/resolver': 'webpack'
  },

and no dice. Is there something else needed to allow it to resolve those aliases properly?

[Ilia]

@dsl101 The first two cases I would probably try to check are:

import Thing from 'src/components/Thing'

or

import Thing from './../components/Thing' // make it relative to your file

[dsl101]

That’s the whole point though–I don’t want relative imports in case the importing file gets moved around. That’s why Quasar provides those aliases isn’t it?

Relative imports are recognised correctly by ESLint, but then become fragile as code is reorganised…

[dsl101]

BTW, it occurred to me that my original post was missing some perhaps important details…

I don’t use ESLint as part of the Quasar build process, and this is not an error coming from running quasar dev or quasar build. I’m using SublimeText with SublimeLinter, which calls ESLint in the project. So I do have the .eslintrc.js file that Quasar created as a base, but don’t use it in build.

So, the problem is that I suspect the webpack configuration that Quasar generates during dev is not accessible to ESLint when run ‘outside’ that context, and that explains why it can’t resolve. The eslint-import-resolver-webpack plugin expects to be able to access a webpack.conf.js containing the webpack configuration, which I guess would give it those aliases. So, I’m assuming that unless I can persuade Quasar to write out the config (could I do this quasar.conf.js in the extendWebpack() hook?), it will be very hard to solve this one.

[dsl101]

OK, this is probably horribly hacky, and I’d love to find there’s a better way to integrate external editor ESLint and Quasar webpack, but I added this to the end of the extendWebpack() hook, and it was sufficient to get eslint-import-resolver-webpack working with both my custom and Quasar’s default aliases:

fs.writeFileSync('./webpack.config.js', `module.exports = {
  resolve: ${util.inspect(cfg.resolve, { showHidden: false, compact: false, depth: null })}
}`)