Is there a way to get resolver aliases to work in RubyMine+Webpacker+Vue

Viewed 345

This is a pretty esoteric question.

I use RubyMine (v 2020.1), Rails 6 with Webpacker 4 (which in turn uses Webpack 4.41), and Vue.js.

With this configuration, I get this annoying problem with the editor:

RubyMine red-lining

common and components are resolver aliases I set in config/webpacker/custom.js.

I cannot figure out how to get RubyMine to properly understand this configuration, and thereby give me proper parsing of the Vue component's style block @imports. Neither the 'plain' alias common nor ~common work. Interestingly, url resolver aliases in the same .vue file <style> sections DO work, e.g. url('~img/common/tooltip-triangle.svg')

1 Answers

You can set this in your project's settings - just specify the path to your config/webpacker/custom.js on Settings/Preferences | Languages and Frameworks | JavaScript | Webpack.

I also assume that you have something similar to the following snippet in your custom.js file:

module.exports = {
  resolve: {
    alias: {
      "common": "/path/to/common"
    }
  }
}
Related