Webpacker: Resolve alias to sub directory

[paulgeisler]

I would like to migrate an existing Vue app into an existing Rails app.
In the native Vue app there is the possibility to create aliases (aka shortcuts/symlinks) for different directories like 'components', 'components/svgs' and so on. The boilerplate for it is already there after generating the app through vue-cli.

My current config for the native Vue app is like this:

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './src/main.js'
      ]
  },
  output: {
    path: config.assetsRoot,
    filename: '[name].js',
    publicPath: config.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': resolve('src/components'),
      '@svgs': resolve('src/components/svgs'),
      'assets': resolve('src/assets'),
      '@mixins': resolve('src/assets/scripts/vue-mixins'),
    }
  },
...

I would like webpacker to resolve @components to /apps/javascripts/packs/ECP/components.

When i transfer the configuration to the rails app using webpacker i get always an error:
Module not found: Error: Can't resolve '@components/HelloWorld.vue' in '/vagrant/webpacker_app/app/javascript/packs/ECP'

File tree is:

app/javascript
└── packs
    └── ECP
        ├── app.vue
        ├── components
        │   └── HelloWorld.vue
        └── hello_vue.js

And my custom webpack cofig is implmented like in the docs:

// config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
      '@components': 'app/javascript/packs/acp/components',
    }
  }
}

I can't figure out why it's not working and would really appreciate some help.

[gauravtiwari]

Are you merging your custom config into default config? https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

[paulgeisler]

Yes, i followed the guide on docs/webpack. According to your opinion should it actually work? Or are aliases only for 'real' modules like jQuery and not just directories?

[gauravtiwari]

No it should work, although I think you would need to resolve the path: https://webpack.js.org/configuration/resolve/#resolve-alias

[paulgeisler]

As you can see in my native Vue app webpack configuration, i resolve the paths and i tried that too in the webpacker configuration but it ends up in the same error message. Here I've imported the webpacker config.js to get the path to the packs directory.

I must confess that i'm still having trouble with webpack and have not a slightest idea why it works there but not here.

I can't imagine it has something to do with Vue itself but maybe it has or it's about the environment.

[gauravtiwari]

Yeah, it looks fine to me. Does your custom config is using resolve?

// config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
      '@components': path.resolve(__dirname, '..', '..', 'app/javascript/packs/acp/components'),
    }
  }
}

You could debug this, after merging custom config:

console.log(environment.toWebpackConfig())

[paulgeisler]

Thank you for your support Gaurav! 🙇 It works as expected! 👍
I think i've messed up something in the path.join construct.

[gauravtiwari]

Great 👍

[pratik0809]

@paulgeisler how were you able to use path? I keep getting a

return path.resolve(__dirname, dir)
 ^

ReferenceError: path is not defined

[gauravtiwari]

@pratik0809 You will need to require path at the top:

const path = require('path')