Laravel-mix: Getting PHP Storm to pick up custom webpackConfig (specifically @ symbol for imports)

[robjbrain]

I realise this is a phpstorm question more than a Mix question but it's more likely someone here will know than someone at Jet Brains

• Laravel Mix Version: 3.0.0
• Node Version: 8.11.3
• NPM Version: 6.2.0
• OS: macOS High Sierra

Description:

I want to be able to use the @ symbol in my imports so I don't have to use relative imports like ../../components/myfile and can instead just do @/components/myfile

So i've added this to my webpack.mix.js

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

This works perfectly.

However now my IDE (phpstorm) won't find the component, so I can't click on it to go to the file and I get an underline with the error "Module is not installed".

Presumably alot of people are using this with PHP Storm and using the @ symbol for imports so someone else has encountered and resolved this?

[rtheunissen]

Why the @ rather than a relative path? ie. import x from "relative/dir" vs import x from "@relative/dir". I'm just not sure if PHPStorm would honor the @ alias anyway.

What seems to work well is to specify resolve.modules paths (including the path used by your alias, and node modules) and mark those directories as resource roots in PHPStorm (along with import settings that are checked for relative imports).

[ankurk91]

phpStorm picks webpack configuration from webpack.config.js file, however mix is using a different file webpack.mix.js

The actual webpack.config.js resides in node_modules/laravel-mix

[rtheunissen]

Can't you specify a webpack config file path?

[rtheunissen]

https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/

I stand corrected, looks like it can resolve aliases. In that case you can either specify a webpack config path in PHPStorm, or create a webpack.config.js file in your root and simply make module.exports = require("laravel-mix/setup/webpack.config.js")

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pnzz7]

i think this gist solves this problem. https://gist.github.com/nachodd/4e120492a5ddd56360e8cff9595753ae