No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    ESLint import plugin not finding Quasar aliased imports

    Help
    2
    5
    660
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dsl101 last edited by

      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?

      I 1 Reply Last reply Reply Quote 0
      • I
        Ilia @dsl101 last edited by

        @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
        
        1 Reply Last reply Reply Quote 0
        • D
          dsl101 last edited by

          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…

          1 Reply Last reply Reply Quote 0
          • D
            dsl101 last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • D
              dsl101 last edited by

              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 })}
              }`)
              
              1 Reply Last reply Reply Quote 0
              • First post
                Last post