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

It does not work for me still

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')
    }
  }
})

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')
      },
    },

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

I had the same issue in Laravel 8 and nothing was working… until I actually looked up the offical laravel-mix docs https://laravel-mix.com/docs/6.0/aliases

Looks like they changed the syntax.

The following is on the start of my webpack.mix.js:

const mix = require('laravel-mix');
const path = require('path')

mix.alias({
    '@myproject': path.join(__dirname, 'resources/js')
});

And this actually works! I can load components like this:

    import Checkbox from '@myproject/components/form/HorizontalCheckbox';

@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.