Laravel-mix: Mix not resolving Alias using Mix.webpackConfig

[ghost]

• laravel-mix: "1.4.5",
• Node v6.11.3
• NPM v3.10.10
• OS: OSX Sierra

Description:

Dependency not found error when trying to reference an alias from webpackConfig

mix.webpackConfig({
  resolve: {
    alias: {
      Admin: path.resolve(__dirname, 'resources/admin')
    }
  }
});

Then trying to reference it as

import Validator from 'Admin/core/Validation/VeeValidation'

[robbyrice]

Could you post the actual error output? Also, you should look at updating your NPM version as it seems to be a bit outdated.

[ghost]

Updated NPM, regarding the error output here it is

> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 2/2 modules 0 active                                         
Webpack is watching the files…
                                                                                                           95% emitting                                                                        
 ERROR  Failed to compile with 2 errors                                                                                                   3:16:03 PM

These dependencies were not found:

* @/admin/components/navigation/toolbar/default.vue in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/admin/views/layouts/default.vue
* @admin/core/services/auth in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/admin/views/pages/auth/login.vue

Note that in this case the alias is "@admin"

Set like this in webpack.mix.js

mix.webpackConfig({
  resolve: {
    alias: {
      "@admin" : path.resolve(__dirname, 'src')
    }
  }
})

[devcircus]

mix.webpackConfig({
resolve: {
alias: {
Admin: path.resolve(__dirname, 'resources, 'admin')
}
}
});

[itelmenko]

@devcircus , What do you mean?
Your code has same effect as @smtlk's code.

BTW, I have same problem. May be it is because laravel-mix does work correctly with babel-plugin-webpack-alias?

[ghost]

@devcircus You should add some comment to that code to let us know what you're thinking but i'll try to interpret.

It appears that you changed the key from a string to a simple name, if this works then the problem is not Mix but rather Webpack itself, having looked at @itelmenko's comment and Mix's package.json i don't see babel-plugin-webpack-alias listed anywhere, if Webpack does not natively support aliasing string's then that would explain it and this would turn into a feature request instead.

However i think Webpack supports using strings which is confusing, i'll have to run a sample project with vanilla Webpack to check and make sure, the 'resources, section is not the problem as i'm not using the standard Laravel resources folder, i have (in the second example i showed) an src folder in the project root and it can't turn it into an alias.

Let us know if this is correct @devcircus and thanks for your help :)

[itelmenko]

How to add babel-plugin-webpack-alias ?

[devcircus]

@smtlk ha! just noticed this. Evidently I submitted this post before I finished. So that was an incomplete thought. I don't remember what my thought was at the time, but that is usually how I use path.resolve. My first argument is the directory I want to start with, then I break up each nested directory into comma separated strings. However, I just installed a fresh laravel project and included the following in my mix file:

mix.webpackConfig({
  resolve: {
    alias: {
      Admin: path.resolve(__dirname, 'resources', 'admin')
    }
  }
});

then in my app.js file, I utilized the alias:

const TestClass = require('Admin/admin_test');
console.log(TestClass);

and everything worked as I expected.

note: I also tried with Admin: path.resolve(__dirname, 'resources/admin') and that worked as well

Are you exporting Validator correctly?

export default Validator;

Sorry for the confusion.

[itelmenko]

@devcircus , please, try something like this:

import Validator from 'Admin/core/Validation/VeeValidation'

Also how can aliases work if you have not babel-plugin-webpack-alias ?

And

path.resolve(__dirname, 'resources', 'admin')

has same effect as

path.resolve(__dirname, 'resources/admin')

form me.

Lavavel-mix 0.8.9 from laravel 5.4

[devcircus]

What is the VeeValidation module? Is that a custom module or something from npm?
For my app, I can use

import Module from 'Admin\MyPackageFolder\Package'

or

const Module = require('Admin\MyPackageFolder\Package'

and both work as expected

that is assuming that I have a file in MyPackageFolder named Package.js and it looks like:

class Package
{
    constructor(width, height)
    {
        this.width = width
        this.height = height
    }
}

export default Package

[itelmenko]

In webpack.mix.js:

console.log('Components:', path.resolve(__dirname, 'resources/assets/js/components'),
    path.resolve(__dirname, 'resources', 'assets', 'js', 'components'));

mix.webpackConfig({
    resolve: {
        alias: {
            Components: path.resolve(__dirname, 'resources', 'assets', 'js', 'components')
        }
    }
});

In /home/igor/projects/projectname/resources/assets/js/components/earnings/EarningsTable.vue

I have

import CssConfig from 'Components/VuetableCssConfig'

Also I have file

/home/igor/projects/projectname/resources/assets/js/components/VuetableCssConfig.js

When I run npm run dev I have message:

Components: /home/igor/projects/projectname/resources/assets/js/components /home/igor/projects/projectname/resources/assets/js/components
95% emitting

ERROR Failed to compile with 1 errors 08:54:35

This dependency was not found:

• Components/VuetableCssConfig in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/earnings/EarningsTable.vue

To install it, you can run: npm install --save Components/VuetableCssConfig

As we can see console.log write the pathes with commas and slashes are equal.
Also we can see aliases don't work.

I tries to use it for laravel-mix 0.8.9 from laravel 5.4.
Also I tried to update it to last release. But problem is not resolved.

[itelmenko]

May be it is babel issue? What babel version do you use?

[ghost]

Strange, after taking the weekend off i came back today and found out that it's working now i must've done something wrong before.

mix.webpackConfig({
  resolve: {
    alias: {
      '@admin': path.resolve(__dirname, 'src', 'admin')
    }
  }
});

Works fine, even with the string as key. No issue whatsoever. Thank you all for your help

[itelmenko]

It does not work for me still

[stevethomas]

In case people found there way here via google like I did, one possibility is that you have an issue with case-sensitivity.

In my case, npm run dev was working fine on OS X, but I didn't realise that my git repo had both Components and components directories pushed because I can only see one locally.

Ubuntu / linux allows both these directories to co-exist which was causing my issue in production.

The solution is to make sure your import paths have the correct casing, and if you have a rogue file you can do this:
git mv resources/js/components/UserTableRow.vue resources/js/Components/UserTableRow.vue.

 .webpackConfig({
    output: { chunkFilename: 'assets/next/js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        '@': path.resolve('resources/js')
      },
    },