Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mix not resolving Alias using Mix.webpackConfig

See original GitHub issue

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'

Issue Analytics

State:
Created 6 years ago
Comments:15 (3 by maintainers)

Top GitHub Comments

16reactions

itelmenkocommented, Oct 2, 2017

It does not work for me still

9reactions

ghostcommented, Sep 27, 2017

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

Top Results From Across the Web

Getting Webpack alias working in mix

I have a project where I am trying to refactor the JavaScript imports to be able to use absolute paths rather than relative....

Webpack alias in Laravel Mix to node_modules

JS in a Laravel 5.8 project to import css and js I have in my module. webpack.mix.js mix.webpackConfig({ resolve: { alias: { 'alias': ......

Resolve alias using Laravel-Mix

Hello everybody,. I got this (shortened) mix-file (`webpack.mix.js`):. const mix = require('laravel-mix'); const path = require('path');

Aliases | Laravel Mix Documentation

Mix offers the ability to configure aliases that get expanded when importing files. It supports aliasing specific paths and whole modules. Aliasing Paths....

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 b... Tagged with laravel, webpack....