DEV Community

Kay Gosho
Kay Gosho

Posted on

Laravel tips: set resolve alias in Laravel mix

This is not exactly about Laravel but Webpack, neverthless, I thought I should have set this at the beginning of my project.

Prerequisites

Developing with

  • Laravel 5.4
  • webpack (Laravel mix)

Problem

I used to relatively specify path to a file in any .js files:

// resources/assets/vue/components/Deep/Path/To/Component.vue

import FooComponent from '../../FooComponent.vue'
Enter fullscreen mode Exit fullscreen mode

This is hard to understand, and if I change the directory structure I have to change every path.

...and just looks ugly.

Solution

Add the following config at the beginning of webpack.mix.js.

// webpack.mix.js

const { mix } = require('laravel-mix')

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    },
  },
})

// ...config follows
Enter fullscreen mode Exit fullscreen mode

Then, we can import like this:

// resources/assets/vue/components/Deep/Path/To/Component.vue

import FooComponent from '@/components/FooComponent'
Enter fullscreen mode Exit fullscreen mode

I found vue-cli uses this config. It set resolve alias @ to src by default.

https://github.com/vuejs-templates/webpack/blob/f21376d/template/build/webpack.base.conf.js#L40

Hope this config comes to default of Laravel Mix.
I am wondering I would send a PR...

Refs

Top comments (10)

Collapse
 
brickgale profile image
Brian Monsales

This will not work on the latest laravel-mix. laravel-mix.com/docs/4.0/extending...

Collapse
 
josegus profile image
Gustavo Vasquez • Edited

It is working for me in the latest laravel-mix:

mix.webpackConfig({
    resolve: {
        alias: {
            '@models': path.resolve(__dirname, 'resources/js/models/'),
            '@services': path.resolve(__dirname, 'resources/js/services/'),
            '@sections': path.resolve(__dirname, 'resources/js/sections/'),
            '@components': path.resolve(__dirname, 'resources/js/components/'),
        }
    }
});
Enter fullscreen mode Exit fullscreen mode
Collapse
 
patricnox profile image
PatricNox

Thanks! This is the cleanest way.

Collapse
 
brickgale profile image
Brian Monsales

mix.extend('exampleConfig', new class {
webpackConfig(webpackConfig) {
webpackConfig.resolve.extensions.push('.js', '.vue', '.json'); // you don't need this on v4
webpackConfig.resolve.alias = {
'vue$': 'vue/dist/vue.esm.js',
'@': __dirname + '/resources/assets/js'
};
}
});

and lastly, call it on last: mix.exampleConfig();

Collapse
 
acro5piano profile image
Kay Gosho

Thank you for pointing out!

Collapse
 
bolechen profile image
Bole Chen
Collapse
 
plweil profile image
Peter Weil

I get an npm compile error using either solution:

"Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

The referenced sass file uses several @import statements.

In addition, I am using mix v2 and PHPStorm 2019.3. I don't understand the solution offered above for PHPStorm, since Mix already includes a webpack.config.js file at root. How is one supposed to integrate the suggested code with what is already in that config file? I've seen a number of proposed solutions to this question, but I haven't gotten anything to work. Any suggestions would be appreciated.

Collapse
 
robjbrain profile image
Rob Brain • Edited

This seems to break the IDE (phpstorm) though. You can no longer click on a component name and you get an underline error "module is not installed"

Collapse
 
matzeso profile image
Matthias Sondermann

See here for a solution to that issue:
gist.github.com/nachodd/4e120492a5...

Collapse
 
acro5piano profile image
Kay Gosho

Oh really, I have never used PHPStorm. Thank you for pointing out.