Level 8
On further investigation I don't seem to have this problem when I try a similar setup in a fresh copy of Laravel. I'm guessing updating Mix will resolve the issue.
Jul 11, 2017
3
Level 8
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. My understanding is that you should be able to create aliases in the webpack config that refer to a specific directory. For instance I have created the following code in my webpack.mix.js file:
const path = require("path");
mix.webpackConfig({
resolve: {
alias: {
Admin: path.resolve(__dirname, 'resources/asets/js/admin')
}
}
});
In my JavaScript I have set up a simple test file containing a console.log call. I am trying to import it using import "Admin/test" but when I try to compile it I get the following error:
This dependency was not found in node_modules:
* Admin/test
I'm assuming I have something set up wrong but I can't seem to figure out what it is. Does anybody have any idea where I might be going wrong?
Level 1
Is your 'asets' really with one s ?
Level 1
I managed to solve this by creating a webpack.config.js file separately like:
const path = require('path')
const webpack = require('webpack')
module.exports = {
...
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.resolve(__dirname, './resources/assets/js')
}
},
...
}
And then importing it in the webpack.mix.js like:
const config = require('./webpack.config')
...
mix.webpackConfig(config)
Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack
3 likes
Please or to participate in this conversation.